/* ==========================================================================
   Projéta - Habillage du panier Snipcart
   --------------------------------------------------------------------------
   Le thème Snipcart lit des variables CSS (avec des replis gris/bleus
   d'usine) : on les redéfinit ici avec les jetons du site (tokens.css),
   portées par la div #snipcart - tout le panier vit dedans. Pour
   re-teinter le panier, changer les valeurs ici, rien d'autre.
   ========================================================================== */

/* Le volet passe DEVANT la barre du site (sticky, z-index 40 dans
   layout.css) - le thème Snipcart le met à 20 par défaut. Le trait
   d'encre à gauche le détache du fond, comme les filets du site. */
#snipcart .snipcart-modal__container {
  z-index: 60;
  border-left: var(--trait);
}

/* Voile derrière le volet : Snipcart n'en pose aucun en mode side -
   le nôtre (posé par snipcart.php) reprend le backdrop de la galerie
   (shop.css). Cliquer dessus ferme le panier. */
.panier-voile {
  position: fixed;
  inset: 0;
  z-index: 55; /* sous le volet (60), au-dessus de la barre (40) */
  background: color-mix(in srgb, var(--ink) 75%, transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
}
.panier-voile.est-visible {
  opacity: 1;
  pointer-events: auto;
}

/* Panier ouvert : la page ne défile plus, comme sous la galerie */
body.panier-ouvert { overflow: hidden; }

/* La note au-dessus du Total (« frais calculés au paiement ») - en
   encre lisible plutôt que le gris d'usine. Quand une prévente est au
   panier (classe .a-prevente posée par snipcart.php), la note devient
   un encart jaune signal : la commande partira à la fin de la prévente. */
#snipcart .snipcart-summary-fees__notice {
  color: var(--ink);
  font: 400 12px/1.5 var(--font-mono);
}
#snipcart.a-prevente .snipcart-summary-fees__notice {
  font-weight: 700;
  background: var(--jaune);
  border: var(--trait);
  border-radius: var(--rayon-chip);
  padding: 10px 12px;
  margin-bottom: 12px;
}

#snipcart {

  /* --- Fonds : les papiers du site, voile d'encre derrière le volet
         (le même que le backdrop de la galerie produit - shop.css) --- */
  --bgColor-modal:     var(--paper);
  --bgColor-modalVeil: color-mix(in srgb, var(--ink) 75%, transparent);
  --bgColor-default:   var(--paper);
  --bgColor-alt:       var(--paper-alt);
  --bgColor-info:      var(--paper-alt);

  /* --- Textes et liens --- */
  --color-default: var(--ink);
  --color-alt:     color-mix(in srgb, var(--ink) 62%, var(--paper));
  --color-icon:    var(--ink);
  --color-link:        var(--bleu);
  --color-link-hover:  var(--bleu);
  --color-link-active: var(--bleu);
  --color-link-focus:  var(--bleu);

  /* --- Champs de formulaire --- */
  --bgColor-input:            var(--paper);
  --color-input:              var(--ink);
  --color-inputLabel:         var(--ink);
  --color-inputIcon:          var(--ink);
  --color-inputPlaceholder:   color-mix(in srgb, var(--ink) 45%, var(--paper));
  --borderColor-input:        color-mix(in srgb, var(--ink) 45%, var(--paper));
  --borderColor-input-hover:  var(--ink);
  --borderColor-input-focus:  var(--ink);
  --borderColor-input-checked: var(--ink);
  --bgColor-input-checked:    var(--ink);
  --shadow-input-focus: 0 0 0 3px color-mix(in srgb, var(--jaune) 45%, transparent);

  /* --- Bouton principal (« Paiement ») : le jaune signal du site --- */
  --bgColor-buttonPrimary:        var(--jaune);
  --bgColor-buttonPrimary-hover:  color-mix(in srgb, var(--jaune) 88%, var(--ink));
  --bgColor-buttonPrimary-active: color-mix(in srgb, var(--jaune) 88%, var(--ink));
  --bgColor-buttonPrimary-focus:  var(--jaune);
  --color-buttonPrimary:          var(--ink);
  --color-buttonPrimary-hover:    var(--ink);
  --color-buttonPrimary-active:   var(--ink);
  --color-buttonPrimary-focus:    var(--ink);
  --bgColor-buttonPrimary-disabled: var(--paper-alt);
  --color-buttonPrimary-disabled:   color-mix(in srgb, var(--ink) 40%, var(--paper-alt));
  --bgColor-buttonPrimary-success:  var(--vert);
  --bgColor-buttonPrimary-error:    var(--rouge);

  /* --- Bouton secondaire : contour encre sur papier (comme btn--contour) --- */
  --bgColor-buttonSecondary:          var(--paper);
  --bgColor-buttonSecondary-hover:    var(--ink);
  --bgColor-buttonSecondary-active:   var(--ink);
  --color-buttonSecondary:            var(--ink);
  --color-buttonSecondary-hover:      var(--paper);
  --color-buttonSecondary-active:     var(--paper);
  --borderColor-buttonSecondary:        var(--ink);
  --borderColor-buttonSecondary-hover:  var(--ink);
  --borderColor-buttonSecondary-active: var(--ink);

  /* --- Bouton « supprimer » : rouge lavé, plein au survol --- */
  --bgColor-buttonDanger:       color-mix(in srgb, var(--rouge) 12%, var(--paper));
  --bgColor-buttonDanger-hover: var(--rouge);
  --color-buttonDanger:         var(--rouge);
  --color-buttonDanger-hover:   var(--paper);

  /* --- États --- */
  --color-success:   var(--vert);
  --bgColor-success: color-mix(in srgb, var(--vert) 12%, var(--paper));
  --color-error:     var(--rouge);
  --bgColor-error:   color-mix(in srgb, var(--rouge) 12%, var(--paper));

  /* --- Badges des étapes du tunnel --- */
  --bgColor-badge:          var(--paper-alt);
  --color-badge:            var(--ink);
  --borderColor-badge:      color-mix(in srgb, var(--ink) 35%, var(--paper));
  --bgColor-badge-active:     var(--jaune);
  --color-badge-active:       var(--ink);
  --borderColor-badge-active: var(--ink);
}