/**
 * Composeur de coffret - habillage des deux blocs.
 *
 * Maquette Figma « Page - Coffret personnalisable » (node 23:2155), relevé sur
 * la base 1280 comme le reste des pages du site.
 *
 * Cette feuille vit dans le module (et non dans le SCSS du thème) parce que le
 * composeur est le seul consommateur de ces classes et qu'elle doit suivre le
 * module partout où son widget est posé. Elle est chargée sur la page du module
 * ET sur la page CMS déclarée dans COFFRET_CMS_ID (voir
 * hookActionFrontControllerSetMedia).
 *
 * Les couleurs viennent des tokens de la charte (`--pep-*`, définis par le
 * thème) : aucune valeur de marque n'est recopiée ici.
 */

.coffret-composer {
  --coffret-card-radius: 10px;
  --coffret-gap: 24px;

  /* Vert sauge du relevé (bouton de validation). La charte Pépinova n avait
     pas de token pour cette couleur : elle est déclarée ici, comme le badge
     des bénéfices la déclare dans le SCSS du thème. */
  --coffret-sage: #abaf91;
  --coffret-sage-dark: #979c7c;

  display: flex;
  flex-direction: column;
  gap: 64px;
}

/* Action en cours : on neutralise les clics (pas de double envoi) mais on ne
   grise QUE les deux listes. Griser le composeur entier faisait clignoter le
   titre et les onglets à chaque filtrage, ce qui se lisait comme un
   rechargement de page. */
.coffret-composer--busy {
  pointer-events: none;
}

.coffret-composer--busy .coffret-products__grid,
.coffret-composer--busy .coffret-products__empty,
.coffret-composer--busy .coffret-basket__list {
  opacity: 0.5;
  transition: opacity 120ms linear;
}

.coffret-composer__message {
  margin: 0 0 16px;
  font-size: 14px;
  color: var(--pep-ink);
}

.coffret-composer__message--error {
  color: var(--pep-terracotta-dark);
}

/* --- Titres des deux blocs ------------------------------------------- */

.coffret-products__head,
.coffret-basket__head {
  margin-bottom: 24px;
}

.coffret-products__title,
.coffret-basket__title {
  margin: 0 0 6px;
  font-size: 24px;
  font-weight: 600;
  color: var(--pep-ink);
}

/* Cœur SAUGE à droite du titre (maquette 46:790 et 46:894, recette du
   2026-09-30). Même tracé que le cœur de titre du thème (`pep-coeur()` de
   _brand.scss), recopié en data-URI : cette feuille est du CSS brut, elle
   n'a pas accès aux fonctions Sass du thème. 18px de large, 15px d'écart
   au texte : valeurs de la maquette. */
.coffret-products__title::after,
.coffret-basket__title::after {
  display: inline-block;
  width: 18px;
  aspect-ratio: 276 / 254;
  margin-inline-start: 12px;
  vertical-align: -0.05em;
  content: "";
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='194 208 276 254'%3E%3Cpath fill='%23B1B597' d='M 250.5 213.4 C 232.7 216.8, 217.2 227.6, 207.7 243.2 C 195.6 263.2, 194.7 294.3, 205.4 320.6 C 220.6 358, 266.6 410.6, 317.3 448.6 C 325 454.3, 331.5 459, 331.8 459 C 332.9 459, 360.2 436.8, 374.5 424.5 C 390.1 411, 417.9 382.8, 427.3 371 C 471.8 315.1, 478.6 264.9, 446 231.9 C 416.4 201.9, 368.2 207.9, 338.5 245.4 L 331.7 253.9 328.2 249.2 C 307.8 221.8, 278.2 208.1, 250.5 213.4'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Accroche : 14px jugé trop petit à la recette du 2026-09-30 (maquette :
   15px sous un titre de 24px). Corps d'interface du thème, 16px. */
.coffret-products__intro,
.coffret-basket__intro {
  margin: 0;
  font-size: var(--pep-text-base, 16px);
  color: var(--pep-ink);
}

.coffret-basket__subtotal {
  margin: 10px 0 0;
  font-size: 14px;
  color: var(--pep-ink);
}

.coffret-basket__amount {
  margin-inline-start: 8px;
  font-weight: 600;
}

/* --- Filtres de catégorie -------------------------------------------- */

.coffret-products__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}

.coffret-products__filter {
  padding: 4px 14px;
  font-size: 12px;
  font-weight: 500;
  color: var(--pep-ink);
  text-decoration: none;
  background-color: #fff;
  border: 1px solid var(--pep-cream);
  /* Onglets à angles doux et non en pilule (maquette 46:879, recette du
     2026-09-30). */
  border-radius: 5px;
  transition:
    color 0.15s ease,
    background-color 0.15s ease,
    border-color 0.15s ease;
}

.coffret-products__filter:hover,
.coffret-products__filter:focus-visible {
  color: var(--pep-terracotta);
  border-color: var(--pep-terracotta);
}

.coffret-products__filter--current,
.coffret-products__filter--current:hover {
  color: var(--pep-cream);
  background-color: var(--pep-terracotta);
  border-color: var(--pep-terracotta);
}

/* --- Grille de produits ---------------------------------------------- */

.coffret-products__grid,
.coffret-basket__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--coffret-gap);
  padding: 0;
  margin: 0;
  list-style: none;
}

.coffret-card,
.coffret-line {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background-color: #fff;
  border: 1px solid var(--pep-cream);
  border-radius: var(--coffret-card-radius);
}

.coffret-card__media,
.coffret-line__media {
  display: flex;
  align-items: center;
  justify-content: center;

  /* `min-height: 0` : la vignette est un élément flex de la carte, donc avec
     `min-height: auto` par défaut. Sans cette remise à zéro, un visuel plus
     haut que le rapport ci-dessous POUSSE le cadre au lieu d'être recadré, et
     les vignettes d'une même rangée n'ont plus la même hauteur. */
  min-height: 0;
  overflow: hidden;
  aspect-ratio: 193 / 137;
  background-color: var(--pep-cream);
}

/* Le visuel remplit toujours sa vignette, packshot compris (`--packshot`,
   produit coché « Utilisable dans un coffret ») : même parti que le reste
   du site depuis la recette du 2026-09-30 (mixin de thème
   pep-thumb-surface, galerie de la fiche produit). Le retrait d'origine
   (60 % de large au plus, `contain`) laissait le visuel flotter au milieu
   du cadre crème. Le crème reste, visible au travers d'un PNG transparent. */
.coffret-card__image,
.coffret-line__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.coffret-card__body,
.coffret-line__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 12px;
  padding: 12px 14px 14px;
}

.coffret-card__name,
.coffret-line__name {
  margin: 0;
  font-size: 13px;
  line-height: 1.3;
  color: var(--pep-ink);
  text-decoration: none;
}

.coffret-card__footer,
.coffret-line__footer {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
}

.coffret-card__price,
.coffret-line__price {
  font-size: 15px;
  font-weight: 600;
  color: var(--pep-terracotta);
}

.coffret-card__add {
  margin: 0;
}

/* Prix barré d'une promotion, même traitement que la carte de listing. */
.coffret-card__price-old {
  font-size: 13px;
  color: var(--pep-ink-soft);
  text-decoration: line-through;
}

/* Produit en rupture : la carte reste lisible mais ne propose pas d'ajout. */
.coffret-card--unavailable .coffret-card__media,
.coffret-card--unavailable .coffret-card__name {
  opacity: 0.55;
}

.coffret-card__unavailable {
  font-size: 12px;
  font-weight: 600;
  color: var(--pep-ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Pastille d'ajout : même signe et même pastille que la carte de listing. */
.coffret-card__add-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  font-size: 16px;
  line-height: 1;
  color: var(--pep-cream);
  cursor: pointer;
  background-color: var(--pep-terracotta);
  border: 0;
  border-radius: 50%;
}

.coffret-card__add-button:hover:not(:disabled) {
  background-color: var(--pep-terracotta-dark);
}

.coffret-card__add-button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

/* --- Sélecteur de quantité du bloc « Votre coffret » ------------------ */

/* Sélecteur de quantité de la carte : crème cerclé terracotta, 84x25 au
   relevé (maquette 63:325). */
.coffret-line__quantity {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 25px;
  padding-inline: 4px;
  background-color: var(--pep-cream);
  border: 1px solid var(--pep-terracotta);
  border-radius: 999px;
}

.coffret-line__quantity form {
  margin: 0;
}

.coffret-line__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 20px;
  padding: 0;
  font-size: 14px;
  line-height: 1;
  color: var(--pep-terracotta);
  cursor: pointer;
  background: transparent;
  border: 0;
}

.coffret-line__step:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

.coffret-line__count {
  min-width: 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--pep-ink);
  text-align: center;
}

/* --- Charger plus de produits ---------------------------------------- */

.coffret-products__more {
  display: block;
  margin-top: 32px;
  padding: 11px 16px;
  font-size: 14px;
  color: var(--pep-ink);
  text-align: center;
  text-decoration: none;
  background-color: #fff;
  border: 1px solid var(--pep-cream);
  border-radius: 8px;
}

.coffret-products__more:hover {
  color: var(--pep-terracotta);
  border-color: var(--pep-terracotta);
}

/* --- Bas du bloc « Votre coffret » ----------------------------------- */

.coffret-basket__box {
  margin: 16px 0 0;
  font-size: 14px;
  color: var(--pep-ink);
}

.coffret-basket__box span {
  font-weight: 600;
}

.coffret-basket__empty,
.coffret-products__empty {
  margin: 0;
  font-size: 14px;
  color: var(--pep-ink-soft);
}

/* Reste à faire pour valider le coffret (« Encore 2 article(s)… »), dans
   l'en-tête de « Votre coffret ». En gris clair et en bas de bloc, il passait
   inaperçu (retour client du 2026-09-15) : il prend la pastille terracotta
   pour être lu pendant qu'on compose.

   La RÈGLE elle-même (« de 3 à 6 articles ») n'a pas de pastille : elle est
   dite en toutes lettres dans l'accroche de « Choisissez vos produits ».

   `inline-block` : la pastille s'arrête au texte, elle ne barre pas toute la
   colonne. Terracotta foncé sur terracotta 12% ≈ 4,4:1, conforme AA - le
   `.badge.bg-primary` de la charte, blanc sur terracotta 50%, ne l'est pas
   (charte §4). */
.coffret-basket__hint {
  display: inline-block;
  margin: 12px 0 0;
  padding: 6px 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--pep-terracotta-dark);
  background-color: var(--pep-terracotta-tint);
  border-radius: var(--pep-radius-pill);
}

.coffret-basket__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  margin-top: 32px;
}

/* Validation : bouton VERT SAUGE de la maquette, et non la pilule terracotta
   des autres appels à l'action du site (relevé 63:322). Rayon de 15px et non
   la pilule du thème (maquette 46:936, recette du 2026-09-30) : la classe
   doublée bat le `.btn` de _brand.scss §5, hors couche lui aussi. */
.coffret-basket__validate.coffret-basket__validate {
  min-width: 236px;
  height: 44px;
  padding-inline: 24px;
  color: var(--pep-cream);
  background-color: var(--coffret-sage);
  border-color: var(--coffret-sage);
  border-radius: 15px;
}

/* Coffret incomplet : le bouton garde sa couleur. À 50 % d'opacité, le sauge
   virait au gris clair et le libellé crème devenait illisible (recette du
   2026-09-30). L'état reste signalé par le curseur, l'absence d'ombre et le
   rappel « Encore N article(s) » de l'en-tête. */
.coffret-basket__validate.coffret-basket__validate:disabled {
  cursor: not-allowed;
  box-shadow: none;
  opacity: 0.8;
}

.coffret-basket__clear {
  font-size: 13px;
  color: var(--pep-ink-soft);
}

.coffret-basket__done {
  margin-top: 24px;
  font-size: 14px;
}

.coffret-basket__done-title {
  margin: 0 0 8px;
  font-weight: 600;
}

.coffret-basket__done-list {
  padding: 0;
  margin: 0 0 8px;
  list-style: none;
}

/* --- Lame « Vos coffrets au panier » --------------------------------- */

.coffret-validated {
  padding: 24px;
  background-color: var(--pep-cream);
  border-radius: var(--coffret-card-radius);
}

.coffret-validated__head {
  margin-bottom: 16px;
}

.coffret-validated__title {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 600;
  color: var(--pep-ink);
}

.coffret-validated__intro {
  margin: 0;
  font-size: 14px;
  color: var(--pep-ink);
}

.coffret-validated__list {
  padding: 0;
  margin: 0;
  list-style: none;
}

.coffret-validated__item {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: center;
  justify-content: space-between;
  padding-block: 12px;
  border-block-start: 1px solid #fff;
}

.coffret-validated__item:first-child {
  border-block-start: 0;
}

.coffret-validated__infos {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  align-items: baseline;
  font-size: 14px;
  color: var(--pep-ink);
}

.coffret-validated__label {
  font-weight: 600;
}

.coffret-validated__count {
  color: var(--pep-ink-soft);
}

.coffret-validated__total {
  font-weight: 600;
}

/* Composition en mini-cartes : visuel + nom, très compact. */
.coffret-validated__items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  padding: 0;
  margin: 4px 0 0;
  list-style: none;
}

.coffret-mini {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  max-width: 100%;
  padding: 4px 10px 4px 4px;
  font-size: 12px;
  color: var(--pep-ink);
  background-color: #fff;
  border-radius: 999px;
}

.coffret-mini__media {
  display: block;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  overflow: hidden;
  background-color: var(--pep-cream);
  border-radius: 50%;
}

.coffret-mini__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.coffret-mini__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.coffret-mini__qty {
  font-weight: 600;
  color: var(--pep-terracotta);
}

.coffret-validated__actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.coffret-validated__actions form {
  margin: 0;
}

/* Retrait : le bouton doit se voir sans devenir un appel à l'action. Pilule
   teintée terracotta (le token de survol de la charte) sur le crème de la
   lame, libellé terracotta foncé. La classe est DOUBLÉE : `.btn-link` du
   thème pose sa propre couleur et son propre padding. */
.coffret-validated__remove.coffret-validated__remove {
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--pep-terracotta-dark);
  text-decoration: none;
  background-color: var(--pep-terracotta-tint);
  border-radius: 999px;
}

.coffret-validated__remove.coffret-validated__remove:hover {
  color: #fff;
  background-color: var(--pep-terracotta);
}

.coffret-validated__cart-link {
  display: inline-block;
  margin-top: 16px;
  font-size: 14px;
  color: var(--pep-terracotta);
}

/* --- Page du module (hors Creative Elements) -------------------------- */

.coffret-page {
  padding-block: 32px 64px;
}

.coffret-page__notice {
  margin-bottom: 24px;
  padding: 12px 16px;
  font-size: 14px;
  border-radius: 8px;
}

.coffret-page__notice--success {
  color: var(--pep-ink);
  background-color: var(--pep-cream);
}

.coffret-page__notice--error {
  color: #fff;
  background-color: var(--pep-terracotta);
}

/* --- Adaptations ----------------------------------------------------- */

@media (max-width: 991.98px) {
  .coffret-composer {
    gap: 48px;
  }

  .coffret-products__grid,
  .coffret-basket__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .coffret-products__grid,
  .coffret-basket__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 479.98px) {
  .coffret-products__grid,
  .coffret-basket__list {
    grid-template-columns: minmax(0, 1fr);
  }
}