/**
 * Champ de broderie de la fiche produit.
 *
 * Feuille de MODULE : chargée après theme.css et HORS @layer, elle l'emporte
 * donc sur les couches du thème comme sur le kit Creative Elements (voir
 * CLAUDE.md §3, « Cascade : les couches CSS »). Aucune règle !important n'est
 * nécessaire ici.
 *
 * Les couleurs, rayons et tailles viennent des tokens de la charte
 * (--pep-*, définis dans themes/template/src/scss/_brand.scss) : le bloc suit
 * automatiquement un changement de charte.
 */

/* Le bas est moins rembourré que les côtés : la mention légale ferme le bloc,
   elle n'a pas besoin d'autant d'air en dessous que le champ n'en a autour. */
.broderie {
  padding: 1.25rem 1.25rem 0.75rem;
  margin-block-end: 1.5rem;
  background-color: var(--pep-cream, #f7f1e9);
  /* Rayon en px et non en rem : le thème rebase le rem à 20px, une valeur en
     rem donnerait 31px au lieu des 25px de la maquette (CLAUDE.md, charte). */
  border-radius: 25px;
}

.broderie__head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: baseline;
  justify-content: space-between;
  margin-block-end: 0.5rem;
}

.broderie__label {
  margin: 0;
  font-size: var(--pep-title-sm, 16px);
  font-weight: 600;
  color: var(--pep-ink, #3a332f);
}

.broderie__tarif {
  font-size: var(--pep-text-sm, 14px);
  color: var(--pep-terracotta-dark, #b76a5c);
}

.broderie__input {
  height: 46px;
  font-size: var(--pep-text-base, 16px);
  background-color: var(--pep-surface, #fff);
}

.broderie__footer {
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
  justify-content: space-between;
  margin-block-start: 0.4rem;
  font-size: var(--pep-text-sm, 14px);
  color: var(--pep-ink-soft, rgba(58, 51, 47, 0.72));
}

/* Le supplément est l'information qui engage : il se lit avant le compteur. */
.broderie__total {
  font-weight: 600;
  color: var(--pep-terracotta-dark, #b76a5c);
}

.broderie__help,
.broderie__notice {
  margin-block: 0.6rem 0;
  font-size: var(--pep-text-xs, 12px);
  line-height: 1.45;
  color: var(--pep-ink-soft, rgba(58, 51, 47, 0.72));
}

/* Mention légale : distinguée de l'aide à la saisie sans crier.
   Dernier élément du bloc, donc aucune marge en dessous. */
.broderie__notice {
  padding-block-start: 0.6rem;
  margin-block-end: 0;
  border-block-start: 1px solid rgba(58, 51, 47, 0.12);
}

.broderie__error {
  margin-block: 0.6rem 0;
  font-size: var(--pep-text-sm, 14px);
  color: #b3261e;
}

.broderie__error[hidden] {
  display: none;
}

@media (max-width: 575.98px) {
  .broderie {
    padding: 1rem 1rem 0.75rem;
  }
}

/* ==================================================================
 *  La broderie d'une ligne, partout où le client la relit
 *  ------------------------------------------------------------------
 *  Modale d'ajout au panier, panier, récapitulatif du tunnel,
 *  confirmation de commande, détail de commande dans l'espace client.
 *  Même markup partout : themes/template/templates/checkout/_partials/
 *  broderie-line.tpl.
 *
 *  Le supplément est affiché parce que le prix de la ligne le contient
 *  déjà : sans lui, l'écart avec le tarif de la fiche produit reste
 *  inexpliqué. C'est aussi ce qui remplace le bouton « Personnalisé »
 *  et sa fenêtre : trois mots ne justifient pas un clic.
 * ================================================================== */

.broderie-line {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: baseline;
  margin-block: 0.35rem;
  font-size: var(--pep-text-sm, 14px);
  line-height: 1.4;
}

.broderie-line__label {
  color: var(--pep-ink-soft, rgba(58, 51, 47, 0.72));
}

.broderie-line__text {
  font-weight: 600;
  color: var(--pep-ink, #3a332f);
}

/* Le montant est l'information qui engage : il se détache. */
.broderie-line__price {
  font-weight: 600;
  color: var(--pep-terracotta-dark, #b76a5c);
  white-space: nowrap;
}