/* ── Snipcart theming — partagé shop + plaintext ───────────────── */
@import url('variables.css');

#snipcart {
    --color-default: white;
    --width-modal: 80vw;
    --borderColor-input: black;
    --bgColor-input: black;
    --bgColor-input-hover: black;
    --borderColor-input-hover: white;
    --borderColor-input-focus: white !important;
    --borderColor-input-active: white !important;
    --shadow-input-focus: black;
    --color-input-hover: white;
    --bgColor-input-focus: black;
    --color-input-focus: white;
    --color-input: white;
    --color-inputLabel: white;
    --bgColor-alt: black;
    --bgColor-default: black;
    --borderColor-default: white;
    --bgColor-modal: black;
    --bgColor-error: black;
    --color-inputIcon-hover: white;
    --bgColor-inputIcon-hover: white;
    --bgColor-input-autofill: black;
    --color-buttonPrimary: white;
    --borderColor-buttonPrimary: white;
    --bgColor-buttonPrimary: black;
    --color-buttonPrimary-hover: black;
    --borderColor-buttonPrimary-hover: white;
    --bgColor-buttonPrimary-hover: white;
    --color-buttonPrimary-active: black;
    --bgColor-buttonPrimary-active: white;
    --borderColor-buttonDanger: white;
    --bgColor-buttonDanger: black;
    --color-buttonDanger: white;
    --borderColor-buttonDanger-hover: black;
    --bgColor-buttonDanger-hover: white;
    --color-buttonDanger-hover: black;
    --borderColor-buttonSecondary: white;
    --bgColor-buttonSecondary: black;
    --color-buttonSecondary: white;
    --borderColor-buttonSecondary-hover: black;
    --bgColor-buttonSecondary-hover: white;
    --color-buttonSecondary-hover: black;
    --bgColor-badge-active: black;
    --color-badge: black;
    --color-badge-active: white;
    --bgColor-input-checked: white;
    --color-input-checked: black;
    --borderColor-input-checked: white;
    --color-icon: white;
    --color-link: white;
    --bgColor-info: black;
    --shadow-default: 0px 1px 0px 0px white;
    font-feature-settings: "tnum";
}
#snipcart * {
    color: white;
    font-family: "BasicallySans", sans-serif;
    border-width: 1px;
}
#snipcart .snipcart-base-button:hover *,
#snipcart .snipcart-base-button:hover { color: black !important; }
#snipcart .snipcart__box--badge { padding-left: .1em; }
#snipcart .snipcart__box--badge.snipcart__font--secondary:not(.snipcart__box--badge-highlight),
#snipcart .snipcart__box--badge.snipcart__font--secondary:not(.snipcart__box--badge-highlight) * { color: black !important; }
#snipcart .snipcart__box--badge-disabled { color: black !important; }
#snipcart .snipcart-modal__container {
    left: auto;
    right: 0;
    width: calc(81vw + 1px);
    border-left: 1px solid white;
    z-index: 99999;
}
#snipcart .snipcart-cart-header__title { display: none; }
#snipcart .snipcart-flash-message__icon { display: none !important; }
#snipcart .snipcart-form__separator { display: none; }
#snipcart .snipcart-test-banner { display: none; }
#snipcart .snipcart__box--badge,
#snipcart .snipcart-form__select { border: 1px solid white; }
#snipcart .snipcart-flash-message { border: 1px solid white; }
#snipcart .snipcart-item-line__container { border-bottom: 0; padding: 32px 0; }
#snipcart .snipcart-cart-header { padding: 16px 0; }
#snipcart .snipcart-form__select,
#snipcart .snipcart-item-quantity__quantity { border: 0; border-bottom: 1px solid white; padding: 0; background: black; }
#snipcart .snipcart-input { border: 0; border-bottom: 1px solid white; padding: 0; background: black; }
/* Case à cocher (newsletter, etc.) : le thème Snipcart la dessine dans le
   ::before du label, avec un contour pris dans --borderColor-input, réglé plus
   haut à noir sur fond noir — donc invisible tant qu'on ne la survole pas.
   La règle qui visait .snipcart-checkbox ne pouvait rien y faire : c'est l'input
   réel, masqué en position:absolute / opacity:0. On habille donc le pseudo-élément.
   Les états survolés et cochés étaient déjà lisibles (--borderColor-input-hover
   et --borderColor-input-checked valent blanc) : seul le repos manquait. */
#snipcart .snipcart-checkbox + label:before { border-color: white; }
#snipcart .snipcart-form__label { color: rgb(128,128,128); }
#snipcart .snipcart-form-radio__label { color: white; font-size: var(--fs-normal); }
#snipcart .snipcart__action--back,
#snipcart .snipcart-cart-header__close,
#snipcart .snipcart-modal__close-title { font-size: var(--fs-petit) !important; }
#snipcart .snipcart-item-line__variants .snipcart-item-custom-fields--dropdown { font-size: var(--fs-petit) !important; display: flex; flex-direction: row; margin-top: 1em; }
#snipcart .snipcart-item-line__variants .snipcart-item-custom-fields--dropdown > .snipcart-custom-field-wrapper__input { width: 8em; margin-left: 1em; }
#snipcart .snipcart-item-line__variants .snipcart-item-custom-fields--dropdown .snipcart__font--regular { font-size: var(--fs-petit) !important; height: 1.7em; }
#snipcart .snipcart-item-line__variants .snipcart-form__select-wrapper { height: 1em; }
/* Choix du mode de livraison : la ligne est une grille à deux colonnes — le
   libellé, puis le prix. Le thème la dessine ainsi, mais notre `display: block`
   hérité du commit initial l'annulait : le prix redevenait un élément en ligne,
   posé sous le libellé et aligné à gauche. On rétablit donc la grille ici, en
   toutes lettres, pour que la mise en page ne dépende plus de l'ordre de
   chargement des feuilles.

   `align-items: baseline` accroche le prix à la PREMIÈRE ligne du libellé.
   Centré verticalement (le réglage du thème), il flottait entre les deux textes
   d'une ligne haute — le sélecteur de point relais en ajoute une troisième — et
   semblait appartenir à la méthode suivante. Le filet ferme chaque ligne pour la
   même raison : dire où elle commence et où elle finit. */
#snipcart .snipcart-shipping-rates-list-item {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    border-bottom: 1px solid rgba(255,255,255,.25);
}
/* Choix du mode de livraison. Le thème dessine DEUX contours qu'on confond
   facilement : celui de la ligne (.snipcart-shipping-rates-list-item) et celui
   du bouton radio, tracé dans le ::before du label, tous deux à partir de
   --borderColor-input — réglé à noir plus haut, donc invisibles sur fond noir.

   La demande portait sur les ronds : on habille donc le pseudo-élément, comme
   pour la case à cocher ci-dessus. Le rond coché reste plein et blanc
   (--bgColor-input-checked), c'est lui qui dit ce qui est choisi : la ligne ne
   porte plus de contour, même sélectionnée. */
#snipcart .snipcart-form-radio + label:before { border-color: white; }
/* Focus clavier : sans halo, le rond focalisé serait identique au rond au
   repos (--borderColor-input-focus vaut déjà blanc). */
#snipcart .snipcart-form-radio:focus + label:before { box-shadow: 0 0 0 2px rgba(255,255,255,.45); }
#snipcart .snipcart-shipping-rates-list-item--highlight,
#snipcart .snipcart-shipping-rates-list-item:focus-within {
    border-color: black;
    /* Le filet du bas est reposé ici, sinon `border-color: black` l'efface : cette
       règle-ci est écrite après celle du filet, à spécificité égale, donc c'est
       elle qui gagne — et la ligne sélectionnée se retrouvait sans séparateur,
       collée à la suivante. */
    border-bottom-color: rgba(255,255,255,.25);
}
#snipcart .snipcart__font--black,
#snipcart .snipcart__font--subtitle,
#snipcart .snipcart__font--subtitle-small,
#snipcart .snipcart__box--badge,
#snipcart .snipcart__font--xlarge { font-family: "PetitFrereWide", sans-serif !important; font-weight: 400; font-size: var(--fs-moyen); }
#snipcart .snipcart__font--small { font-size: var(--fs-petit); }
#snipcart .snipcart-shipping-address__subtitle { font-size: var(--fs-petit); }
#snipcart .snipcart-cart-summary-items-list,
#snipcart .snipcart-cart-summary-items-list *,
#snipcart .snipcart-cart-summary__totals,
#snipcart .snipcart-cart-summary__totals * { font-size: var(--fs-petit) !important; }
#snipcart p + .test-card-hint,
#snipcart .snipcart__font--bold,
#snipcart .snipcart__font--large,
#snipcart .snipcart-modal__close-title,
#snipcart .snipcart__font--regular,
#snipcart .snipcart-featured-payment-methods__link { font-size: var(--fs-petit) !important; }
#snipcart .snipcart-featured-payment-methods__link,
#snipcart .snipcart-summary-fees__title,
#snipcart .snipcart-summary-fees__amount,
#snipcart .snipcart-form__label { font-size: var(--fs-normal); font-weight: 100; }
#snipcart .snipcart-summary-fees__notice { margin-bottom: 1em; line-height: 1.2em; }
#snipcart .snipcart-item-quantity__total-price { margin-left: .8em; }
#snipcart .snipcart-item-line__quantity { min-width: 35em; }
#snipcart .snipcart__font--tiny,
#snipcart .snipcart__font--std { font-size: var(--fs-petit); }
#snipcart .snipcart-cart__footer-col { width: 45%; }
#snipcart [type=text] { background: black; color: white; height: auto; margin: auto; padding: 0; }
#snipcart [type=submit] { margin-top: 1em; }
#snipcart .snipcart-form__field { margin-top: 1em; }
#snipcart .snipcart-base-button.is-icon-right .snipcart-base-button__label { text-align: center; }
#snipcart .snipcart-base-button__label { font-size: var(--fs-normal) !important; }
#snipcart legend { color: white !important; }
#snipcart .snipcart-loading-overlay__content { width: 99% !important; }

@media (max-width: 560px) {
    #snipcart { --width-modal: 100vw; }
    #snipcart .snipcart-modal__container { width: 100vw; border-left: none; }
    #snipcart .snipcart-item-line__media { display: none !important; }
    #snipcart .snipcart__font--black,
    #snipcart .snipcart__font--subtitle,
    #snipcart .snipcart__font--subtitle-small,
    #snipcart .snipcart__box--badge,
    #snipcart .snipcart__font--xlarge { font-size: var(--fs-grand-sp-pfw) !important; }
    #snipcart .snipcart-item-line__quantity { min-width: 0; margin-right: 0; }
    #snipcart .snipcart-item-quantity__total-price { flex: 1; text-align: right; }
    #snipcart .snipcart__font--xlarge,
    #snipcart .snipcart__font--subtitle { margin-bottom: 4px !important; }
    #snipcart .snipcart-item-line__header { margin-bottom: 0 !important; }
    #snipcart .snipcart-item-line__container { padding-bottom: 64px !important; }
    #snipcart .snipcart-cart-header { padding-left: 1.5em; padding-right: 1.5em; }
    #snipcart .snipcart-cart__footer-col { width: 100% !important; }
    #snipcart .snipcart-modal__header-summary-title > span { font-size: var(--fs-moyen) !important; }
    #snipcart .snipcart__box--badge { padding-left: 0; padding-top: .1em; }
    #snipcart .snipcart-item-line__variants .snipcart-item-custom-fields--dropdown { flex-direction: column; width: 100%; margin-bottom: 5em; }
    #snipcart .snipcart-item-line__variants .snipcart-item-custom-fields--dropdown > .snipcart-custom-field-wrapper__input { margin-left: 0; margin-top: 0.5em; width: 100%; }
    #snipcart .snipcart-item-line__variants .snipcart-item-custom-fields--dropdown .snipcart__font--regular { height: 5.1em; }
    #snipcart .snipcart-item-line__variants .snipcart-form__select-wrapper { height: 3em; }
    #snipcart .snipcart-item-line__variants .snipcart-form__label { color: white !important; }
}
/* Cacher la zone de saisie manuelle de code promo (les codes sont appliqués via JS) */
#snipcart .snipcart-discount-box { display: none !important; }