/**
 * Panneau panier : tête titrée, jauge de franco, lignes avec vignette,
 * suggestions défilantes, pied collant.
 *
 * La mise en forme suit la maquette, les couleurs suivent la charte du site :
 * encre sur blanc, crème pour les fonds de vignette et le pied. Tout passe par
 * les variables de base.css — un changement de charte se répercute ici sans
 * retoucher cette feuille.
 */

.ub-panier {
  --ub-panier-accent: var(--ub-encre);
  --ub-panier-vignette: var(--ub-creme);
  --ub-panier-pied-fond: var(--ub-creme);
  --ub-panier-gouttiere: 1.5rem;

  inline-size: min(38rem, 100vw);
  /* Kadence ne pose pas `border-box` partout : sans cette ligne, la gouttière
     des blocs internes s'ajoute à leur largeur et le prix, aligné à droite,
     sortait du panneau. */
  box-sizing: border-box;
  /* La tête et le pied restent en place : c'est le corps qui défile. Le
     `overflow-y: auto` hérité de `.ub-panneau` ferait défiler le bouton de
     paiement hors de vue dès la deuxième ligne. */
  overflow: hidden;
  color: var(--ub-panier-accent);
}

.ub-panier *,
.ub-panier *::before,
.ub-panier *::after { box-sizing: border-box; }

/* --- Tête ---------------------------------------------------------------- */

.ub-panier__tete {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 0.4rem 1rem;
  padding: 1.9rem var(--ub-panier-gouttiere) 1.3rem;
  border-block-end: 1px solid var(--ub-ligne);
}

.ub-panier__titre {
  margin: 0;
  font-size: clamp(1.5rem, 4vw, 1.85rem);
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  line-height: 1.1;
}

.ub-panier__articles {
  grid-column: 1;
  margin: 0;
  font-size: 0.95rem;
  color: var(--ub-panier-accent);
}

.ub-panier__fermer {
  grid-column: 2;
  grid-row: 1 / span 2;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  line-height: 0;
  cursor: pointer;
}

/* Le panneau s'ouvre en donnant le focus à la croix : le cerne bleu du
   navigateur s'affichait alors à chaque ouverture, sans que personne n'ait
   touché au clavier. Il est retiré partout, et remplacé — au clavier seulement
   — par un contour à la charte. L'identifiant est là pour passer devant
   `kadence-integration.css`, chargé après cette feuille.
   Retirer aussi le repère clavier rendrait le panneau inutilisable sans
   souris : c'est l'indicateur qui change, pas sa présence. */
#ub-panneau-panier .ub-panier__fermer:focus,
#ub-panneau-panier .ub-panier__fermer:hover,
#ub-panneau-panier .ub-panier__fermer:active,
#ub-panneau-panier .ub-quantite__bouton:focus,
#ub-panneau-panier .ub-panier-ligne__supprimer:focus,
#ub-panneau-panier .ub-panier-suggestions__fleche:focus,
#ub-panneau-panier .ub-panier-suggestions__fleche:hover {
  outline: none;
  box-shadow: none;
  /* Kadence peint le fond de ses boutons au focus : la croix se retrouvait
     dans un carré bleu à chaque ouverture du panneau, puisque c'est elle qui
     reçoit le focus. */
  background: none;
  color: inherit;
}

/* `!important` à contrecœur : Kadence impose son propre cerne au clavier avec
   la même arme, et sans cela le repère resterait blanc sur blanc — invisible.
   Il ne porte que sur l'apparence du focus clavier, jamais sur la mise en
   page. */
#ub-panneau-panier .ub-panier__fermer:focus-visible,
#ub-panneau-panier .ub-quantite__bouton:focus-visible,
#ub-panneau-panier .ub-panier-ligne__supprimer:focus-visible,
#ub-panneau-panier .ub-panier-suggestions__fleche:focus-visible {
  outline: 2px solid var(--ub-panier-accent) !important;
  outline-offset: 3px !important;
}

/* --- Corps --------------------------------------------------------------- */

.ub-panier__corps {
  flex: 1;
  min-block-size: 0;
  overflow-y: auto;
  padding: 0 var(--ub-panier-gouttiere) 1.5rem;
}

.ub-panier__livraison { padding-block: 1.6rem 0; }

.ub-panier__livraison-texte {
  margin: 0 0 0.8rem;
  font-size: 1.02rem;
  line-height: 1.35;
}

.ub-panier__jauge {
  block-size: 2px;
  background: var(--ub-ligne);
}

.ub-panier__jauge-remplie {
  display: block;
  block-size: 100%;
  background: var(--ub-panier-accent);
  transition: inline-size 0.4s ease;
}

.ub-panier-vide {
  margin-block: 2.5rem;
  color: var(--ub-gris);
  font-size: 0.95rem;
}

/* --- Lignes -------------------------------------------------------------- */

.ub-panier-lignes {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ub-panier-ligne {
  display: grid;
  grid-template-columns: 6.5rem 1fr auto;
  gap: 1.1rem;
  padding-block: 1.9rem;
  border-block-end: 1px solid var(--ub-ligne);
}

.ub-panier-lignes > .ub-panier-ligne:last-child { border-block-end: 0; }

.ub-panier-ligne__visuel {
  display: block;
  aspect-ratio: 1;
  border-radius: 14px;
  background: var(--ub-panier-vignette);
  overflow: hidden;
}

.ub-panier-ligne__visuel img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.ub-panier-ligne__corps {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-inline-size: 0;
}

.ub-panier-ligne__nom {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.3;
  color: inherit;
  text-decoration: none;
}

/* Aucun effet de survol sur la ligne : le nom et « Supprimer » gardent leur
   couleur et restent sans soulignement. Kadence souligne les liens et colore
   les boutons au survol — d'où ces déclarations explicites, y compris sur
   `:focus`, qui reprennent simplement l'état au repos. */
.ub-panier-ligne__nom,
.ub-panier-ligne__nom:hover,
.ub-panier-ligne__nom:focus,
.ub-panier-ligne__visuel:hover,
.ub-panier-ligne__visuel:focus {
  color: inherit;
  text-decoration: none;
}

.ub-panier-ligne__attributs {
  list-style: none;
  margin: 0.2rem 0 0;
  padding: 0;
  color: var(--ub-gris);
  font-size: 0.95rem;
  line-height: 1.5;
}

.ub-panier-ligne__commandes {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin-block-start: 0.9rem;
  flex-wrap: wrap;
}

.ub-quantite {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  border: 1px solid var(--ub-ligne);
  border-radius: 999px;
  padding: 0.15rem 0.25rem;
}

.ub-quantite__bouton {
  inline-size: 2rem;
  block-size: 2rem;
  border: 0;
  border-radius: 50%;
  background: none;
  color: inherit;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.ub-quantite__bouton:hover:not(:disabled) { background: var(--ub-panier-vignette); }
.ub-quantite__bouton:disabled { opacity: 0.45; cursor: progress; }

.ub-quantite__valeur {
  min-inline-size: 1.4rem;
  text-align: center;
  font-size: 0.95rem;
}

.ub-panier-ligne__supprimer {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-family: inherit;
  font-size: 0.95rem;
  cursor: pointer;
}

.ub-panier-ligne__supprimer:hover,
.ub-panier-ligne__supprimer:focus,
.ub-panier-ligne__supprimer:active {
  color: inherit;
  background: none;
  text-decoration: none;
}

.ub-panier-ligne__supprimer:disabled { opacity: 0.45; cursor: progress; }
.ub-panier-ligne__croix { font-size: 0.85rem; }

.ub-panier-ligne__prix {
  font-size: 1rem;
  white-space: nowrap;
}

.ub-panier-ligne__prix .woocommerce-Price-amount { font-weight: 400; }

/* --- Suggestions --------------------------------------------------------- */

.ub-panier-suggestions {
  padding-block-start: 2rem;
  border-block-start: 1px solid var(--ub-ligne);
}

.ub-panier-suggestions__tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-block-end: 1.2rem;
}

.ub-panier-suggestions__titre {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
}

.ub-panier-suggestions__fleches {
  display: flex;
  gap: 0.6rem;
}

.ub-panier-suggestions__fleche {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  line-height: 0;
  cursor: pointer;
}

.ub-panier-suggestions__piste {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(9rem, 1fr);
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0 0 0.5rem;
  overflow-x: auto;
  /* Le doigt s'arrête sur une vignette entière, jamais à moitié dessus. */
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.ub-panier-suggestions__piste::-webkit-scrollbar { display: none; }

.ub-panier-suggestions__item { scroll-snap-align: start; }

.ub-panier-suggestions__lien {
  display: grid;
  gap: 0.5rem;
  color: inherit;
  text-decoration: none;
}

.ub-panier-suggestions__visuel {
  /* `grid` et non `block` : c'est ce qui rend la hauteur du cadre opposable à
     l'image. `place-items: center` la centre quand elle ne remplit pas le cadre. */
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 4;
  border-radius: 12px;
  background: var(--ub-panier-vignette);
  overflow: hidden;
}

/* Le produit tient ENTIER dans le cadre (demande client du 2026-08-06).
   `cover` agrandissait l'image jusqu'à remplir le cadre 3/4 : le packshot de
   l'huile à barbe, au rapport 0,45, s'y réduisait à une bande d'étiquette. Et le
   `block-size: 100%` qui l'accompagnait ne contraignait rien — un pourcentage ne
   se résout pas contre un parent dont la hauteur vient d'un `aspect-ratio`, il
   retombe sur la hauteur du fichier.

   Une hauteur automatique bornée par `max-block-size` fait office de `contain` :
   les règles des éléments remplacés recalculent la largeur pour préserver le
   rapport. `min-block-size: 0` désarme le minimum automatique que la grille pose
   sur ses items. Même correctif que les vignettes du carrousel
   (assets/css/carrousel.css) et que la galerie de la fiche (product.css) : trois
   endroits, un seul piège. */
.ub-panier-suggestions__visuel img {
  inline-size: 100%;
  block-size: auto;
  max-block-size: 100%;
  min-block-size: 0;
}

.ub-panier-suggestions__nom {
  font-size: 0.85rem;
  line-height: 1.35;
}

.ub-panier-suggestions__prix {
  font-size: 0.85rem;
  color: var(--ub-gris);
}

/* --- Pied ---------------------------------------------------------------- */

.ub-panier__pied {
  padding: 1.6rem var(--ub-panier-gouttiere) 1.8rem;
  background: var(--ub-panier-pied-fond);
  border-block-start: 1px solid var(--ub-ligne);
}

.ub-panier__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  font-size: 1.45rem;
  font-weight: 500;
}

.ub-panier__mention {
  margin: 0.35rem 0 1.2rem;
  color: var(--ub-panier-accent);
  font-size: 0.92rem;
}

.ub-panier__commander,
.ub-panier__continuer {
  display: block;
  padding: 1.05rem 1rem;
  border-radius: var(--ub-rayon-bouton);
  background: var(--ub-panier-accent);
  color: var(--ub-creme);
  font-size: 1rem;
  text-align: center;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.ub-panier__commander:hover,
.ub-panier__continuer:hover { opacity: 0.88; }

/* Mise à jour en cours : le panneau reste lisible, seules les commandes
   s'éteignent — un voile complet ferait clignoter le panier à chaque « + ». */
.ub-panier--occupe .ub-panier-lignes { opacity: 0.6; }

@media (max-width: 480px) {
  .ub-panier { --ub-panier-gouttiere: 1.1rem; }

  /* Le pied est collant : chaque millimètre qu'il prend est un millimètre de
     moins pour les articles pendant le défilement. Sur un écran de téléphone,
     il mangeait presque un tiers de la hauteur du panneau. */
  .ub-panier__pied { padding: 0.85rem var(--ub-panier-gouttiere) 0.95rem; }

  .ub-panier__total { font-size: 1.1rem; }

  .ub-panier__mention {
    margin: 0.2rem 0 0.6rem;
    font-size: 0.78rem;
  }

  .ub-panier__commander,
  .ub-panier__continuer {
    /* 0.85rem de haut sur un texte de 0.95rem laisse une cible de 44px, le
       minimum tactile recommandé. */
    padding: 0.85rem 1rem;
    font-size: 0.95rem;
  }

  .ub-panier-ligne {
    grid-template-columns: 5rem 1fr;
    gap: 0.9rem;
  }

  .ub-panier-ligne__visuel { grid-row: 1 / span 2; }

  /* Le prix passe sous le bloc de texte, aligné à droite : à cette largeur, une
     troisième colonne écraserait le nom sur quatre lignes. */
  .ub-panier-ligne__prix {
    grid-column: 2;
    justify-self: end;
  }
}