/* ============================================================================================
   Panier et commande en BLOCS — kimb-native
   ============================================================================================

   Distinct de `woocommerce.css`, qui habille les gabarits CLASSIQUES (order-pay, remerciement,
   compte). Ici, les blocs Gutenberg de WooCommerce, qui rendent `/panier/` et `/commande/`.
   Deux mondes, deux balisages, deux cycles de vie : le jour où l'un des deux disparaît, on
   supprime un fichier au lieu de démêler une feuille commune.

   POURQUOI

   Le viseur affiche son propre panier en calque, et `/panier/` existait en parallèle — même
   session WooCommerce, deux façades. Celle de WooCommerce sait faire ce que le calque ne fait
   pas : modifier les quantités, appliquer un code promo, calculer le port. Elle n'était pas
   habillée, donc invisible.

   Ce fichier prépare la bascule décidée le 21.08.2026 : rendre la main à WooCommerce et cesser
   de réimplémenter la boutique dans la façade.

   ⚠️ Les classes ci-dessous sont relevées dans les feuilles livrées par WooCommerce
   (`assets/client/blocks/*.css`), pas devinées. Elles suivent la version de l'extension : une
   montée majeure peut les renommer, et l'habillage retomberait alors sur le style par défaut —
   sans casse, mais visible. À repasser au contrôle de recette après chaque mise à jour.
   ============================================================================================ */

/* ---- Largeur de page ------------------------------------------------------------------------
   Le thème compose ses pages comme de la prose : `body` en colonne flex, `max-width: 736px`,
   centré par une marge latérale. Un article de loi s'y lit bien. Un panier, non — mesuré le
   21.08.2026, le bloc tombait à **148 px de large dans une fenêtre de 1280**, parce que
   `main.page` ne s'étire pas dans cette colonne et se réduit à son contenu.

   On élargit uniquement les pages de commerce, repérées par les classes que WooCommerce pose
   lui-même sur le `body`. Les pages de texte gardent leur colonne étroite : c'est leur qualité,
   pas un défaut à corriger. */

body.woocommerce-cart,
body.woocommerce-checkout,
body.woocommerce-account {
  max-width: none;
  margin-inline: 0;
  align-items: stretch;
}
body.woocommerce-cart main.page,
body.woocommerce-checkout main.page,
body.woocommerce-account main.page {
  max-width: 1180px;
  width: 100%;
  margin-inline: auto;
  align-self: center;
}
/* `article.doc` porte une mesure de lecture (490 px) qui n'a pas de sens ici. */
body.woocommerce-cart .doc,
body.woocommerce-checkout .doc,
body.woocommerce-account .doc { max-width: none; }

/* ---- Cadre --------------------------------------------------------------------------------- */

.wc-block-cart,
.wc-block-checkout {
  color: var(--blanc);
  font-family: var(--sans);
}
.wc-block-cart a,
.wc-block-checkout a { color: var(--ambre); }

/* Le squelette de chargement est blanc par défaut : sur fond noir, il clignote en négatif. */
.wc-block-components-skeleton,
.wc-block-cart--skeleton { background: var(--surface); }

/* ---- Lignes du panier ---------------------------------------------------------------------- */

.wc-block-cart-items,
.wc-block-cart-items__header { border-color: var(--line); }
.wc-block-cart-items__header {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gris-2);
}
.wc-block-cart-items__row { border-bottom: 1px solid var(--line); }
.wc-block-cart-item__image img { border-radius: 2px; }

.wc-block-components-product-name {
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--blanc);
  text-decoration: none;
}
.wc-block-components-product-name:hover { color: var(--ambre); }

/* Format et support. En capitales espacées comme dans le viseur : c'est la même information,
   elle doit se lire de la même façon d'un écran à l'autre. */
.wc-block-components-product-metadata,
.wc-block-components-product-metadata__variation-data {
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gris-2);
}
.wc-block-cart-item__remove-link {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gris);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.wc-block-cart-item__remove-link:hover { color: var(--rouge); border-bottom-color: var(--rouge); }

/* ---- Quantité ------------------------------------------------------------------------------
   C'est le geste qui manquait : le calque ne proposait qu'un « × » pour retirer la ligne, jamais
   de quoi passer de un à deux. Les commandes cible font 44 px de haut — sous ce seuil, on les
   rate au doigt. */

.wc-block-components-quantity-selector {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 2px;
  min-height: 44px;
}
.wc-block-components-quantity-selector::after { display: none; }   /* liseré par défaut */
.wc-block-components-quantity-selector__input {
  background: transparent;
  color: var(--blanc);
  font-family: var(--mono);
  font-size: 1rem;
}
.wc-block-components-quantity-selector__button {
  background: transparent;
  color: var(--gris-2);
  font-size: 1.1rem;
  min-width: 40px;
  transition: color 0.15s;
}
.wc-block-components-quantity-selector__button:hover:not(:disabled) { color: var(--ambre); }
.wc-block-components-quantity-selector__button:disabled { color: var(--line); }

/* ---- Prix ---------------------------------------------------------------------------------- */

.wc-block-components-product-price,
.wc-block-formatted-money-amount {
  font-family: var(--mono);
  color: var(--blanc);
  white-space: nowrap;
}

/* ---- Colonne des totaux --------------------------------------------------------------------- */

.wc-block-cart__sidebar .wc-block-components-sidebar,
.wc-block-checkout__sidebar .wc-block-components-sidebar {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 1.2rem;
}
.wc-block-cart__totals-title,
.wc-block-components-order-summary__title {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gris-2);
}
.wc-block-components-totals-item {
  font-family: var(--mono);
  font-size: 0.84rem;
  color: var(--gris-2);
}
.wc-block-components-totals-item__value { color: var(--blanc); }
.wc-block-components-totals-item__description { color: var(--gris); font-size: 0.76rem; }
.wc-block-components-totals-footer-item {
  border-top: 1px solid var(--line);
  color: var(--blanc);
  font-size: 1.05rem;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value { color: var(--ambre); }

/* ---- Panneaux repliables (code promo, notes) ------------------------------------------------ */

.wc-block-components-panel { border-top: 1px solid var(--line); }
.wc-block-components-panel__button {
  color: var(--gris-2);
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.wc-block-components-panel__button:hover { color: var(--ambre); }
.wc-block-components-panel__button-icon { fill: currentColor; }

/* ---- Champs ---------------------------------------------------------------------------------
   ⚠️ SPÉCIFICITÉ — tout est préfixé par le `body`, et ce n'est pas du bavardage.

   WooCommerce écrit `.wc-block-components-form .wc-block-components-text-input input[type="…"]`,
   soit deux classes. Un sélecteur à une classe perd, quel que soit l'ordre des feuilles. Et
   `checkout.css` est injecté dynamiquement par le script du bloc : on ne peut pas non plus
   parier sur l'ordre de chargement. Le préfixe `body.woocommerce-…` ajoute un élément et une
   classe, ce qui gagne dans tous les cas de figure.

   Mesuré le 21.08.2026 : sans lui, les champs de la page de commande restaient blancs sur un
   site noir.

   16 px minimum. Sous ce seuil, Safari sur iPhone zoome au premier appui, la mise en page saute
   et le cadrage ne revient pas tant que le visiteur ne dézoome pas à la main. Même règle que
   partout ailleurs, même raison. Ne pas redescendre. */

body.woocommerce-cart .wc-block-components-text-input input,
body.woocommerce-checkout .wc-block-components-text-input input,
body.woocommerce-account .wc-block-components-text-input input,
body.woocommerce-cart .wc-block-components-textarea,
body.woocommerce-checkout .wc-block-components-textarea,
/* Attention au préfixe : le select de WooCommerce s'écrit `wc-blockS-components-`, au pluriel.
   Ce n'est pas une faute de frappe de leur part, c'est un autre paquet. */
body.woocommerce-cart .wc-blocks-components-select__select,
body.woocommerce-checkout .wc-blocks-components-select__select,
body.woocommerce-account .wc-blocks-components-select__select {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 2px;
  color: var(--blanc);
  font-family: var(--sans);
  font-size: 1rem;
}
/* ⚠️ DEUXIÈME PASSE, plus spécifique encore. Le sélecteur de WooCommerce est
   `.wc-block-components-form .wc-block-components-text-input input[type="email"]` : deux
   classes PLUS un attribut, et un attribut pèse autant qu'une classe. Le préfixe `body` seul
   restait un cran en dessous — mesuré le 21.08.2026, les champs sont restés blancs après une
   première correction qui semblait suffisante.
   `input[type]` couvre toutes les variantes sans les énumérer. */
body.woocommerce-cart .wc-block-components-form .wc-block-components-text-input input[type],
body.woocommerce-checkout .wc-block-components-form .wc-block-components-text-input input[type],
body.woocommerce-account .wc-block-components-form .wc-block-components-text-input input[type] {
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--blanc);
}
body.woocommerce-cart .wc-block-components-form .wc-block-components-text-input input[type]:focus,
body.woocommerce-checkout .wc-block-components-form .wc-block-components-text-input input[type]:focus,
body.woocommerce-account .wc-block-components-form .wc-block-components-text-input input[type]:focus {
  border-color: var(--ambre);
  box-shadow: none;
}

body.woocommerce-cart .wc-block-components-text-input input:focus,
body.woocommerce-checkout .wc-block-components-text-input input:focus,
body.woocommerce-account .wc-block-components-text-input input:focus,
body.woocommerce-checkout .wc-blocks-components-select__select:focus {
  outline: none;
  border-color: var(--ambre);
  box-shadow: none;
}
/* L'étiquette flotte par-dessus le champ : sur fond sombre elle doit s'éclaircir, pas s'effacer. */
body.woocommerce-cart .wc-block-components-text-input label,
body.woocommerce-checkout .wc-block-components-text-input label,
body.woocommerce-account .wc-block-components-text-input label,
body.woocommerce-checkout .wc-blocks-components-select__label {
  color: var(--gris);
}
body.woocommerce-cart .wc-block-components-text-input.is-active label,
body.woocommerce-checkout .wc-block-components-text-input.is-active label { color: var(--gris-2); }
body.woocommerce-checkout .wc-block-components-checkbox__input { accent-color: var(--ambre); }
body.woocommerce-checkout .wc-block-components-checkbox__label { color: var(--gris-2); }
/* Le remplissage automatique de Chrome repeint le fond en bleu pâle. On le neutralise par une
   ombre intérieure de 100 vh : c'est le seul levier que le navigateur laisse. */
body.woocommerce-checkout input:-webkit-autofill,
body.woocommerce-checkout input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 100vh var(--surface) inset;
  -webkit-text-fill-color: var(--blanc);
}

/* ---- Étapes de la commande ------------------------------------------------------------------ */

.wc-block-components-checkout-step { border: none; }
.wc-block-components-checkout-step__heading { margin-top: 1.8rem; }
.wc-block-components-checkout-step__title {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--blanc);
}
.wc-block-components-checkout-step__description { color: var(--gris); }
.wc-block-components-checkout-step--with-step-number .wc-block-components-checkout-step__title::before {
  color: var(--ambre);
}

/* ---- Moyens de paiement ---------------------------------------------------------------------
   Même vocabulaire que les onglets du viseur : bordure discrète, ambre à la sélection. Le client
   doit reconnaître d'un écran à l'autre qu'il est au même endroit. */

.wc-block-components-radio-control__option {
  border-bottom: 1px solid var(--line);
  color: var(--blanc);
}
.wc-block-components-radio-control__input { accent-color: var(--ambre); }
.wc-block-components-radio-control-accordion-option--checked-option-highlighted,
.wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control__option--checked-option-highlighted {
  background: rgba(232, 199, 154, 0.07);
  box-shadow: inset 0 0 0 1px var(--ambre);
  border-radius: 2px;
}
.wc-block-components-radio-control__description { color: var(--gris-2); }
.wc-block-components-radio-control-accordion-content {
  background: var(--surface-2);
  color: var(--gris-2);
  border-radius: 0 0 2px 2px;
}

/* ---- Boutons --------------------------------------------------------------------------------- */

.wc-block-components-button:not(.is-link) {
  background: transparent;
  border: 1px solid var(--gris);
  border-radius: 2px;
  color: var(--blanc);
  font-family: var(--mono);
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  min-height: 44px;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.wc-block-components-button:not(.is-link):hover { border-color: var(--ambre); color: var(--ambre); }
/* ⚠️ La classe du bouton principal est DOUBLÉE ici, et ce n'est pas une coquetterie.
   `.wc-block-components-button:not(.is-link)` ci-dessus compte deux classes ; écrit en simple,
   `.wc-block-cart__submit-button` n'en compte qu'une et perd — quel que soit l'ordre. Mesuré le
   21.08.2026 : le bouton « Valider la commande » restait transparent. */
.wc-block-components-button.wc-block-cart__submit-button,
.wc-block-components-button.wc-block-components-checkout-place-order-button {
  background: var(--ambre);
  border-color: var(--ambre);
  color: var(--noir);
  font-weight: 500;
  width: 100%;
}
.wc-block-components-button.wc-block-cart__submit-button:hover,
.wc-block-components-button.wc-block-components-checkout-place-order-button:hover {
  background: var(--blanc);
  border-color: var(--blanc);
  color: var(--noir);
}
.wc-block-components-button.is-link { color: var(--ambre); }

/* ---- Messages -------------------------------------------------------------------------------- */

.wc-block-components-notice-banner {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left-width: 3px;
  color: var(--blanc);
  border-radius: 2px;
}
.wc-block-components-notice-banner.is-error   { border-left-color: var(--rouge); }
.wc-block-components-notice-banner.is-success { border-left-color: var(--vert); }
.wc-block-components-notice-banner.is-info    { border-left-color: var(--gris-2); }
.wc-block-components-notice-banner > svg { fill: currentColor; }
.wc-block-components-notice-banner__content { color: var(--blanc); }

/* ---- Panier vide ------------------------------------------------------------------------------ */

.wc-block-cart__empty-cart__title {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--blanc);
}


/* ============================================================================================
   RAPPROCHEMENT DU TUNNEL DU VISEUR — 21.08.2026
   ============================================================================================
   Le calque avait une écriture : intertitres en ambre, capitales espacées, monospace pour tout
   ce qui se compte, sérif pour ce qui se lit. La page de WooCommerce doit parler la même langue,
   sans quoi le client change de site au milieu de son achat.

   On habille le mécanisme, on ne le remplace pas. L'étiquette flottante des champs, par exemple,
   est un comportement des blocs : la forcer au-dessus du champ casserait l'animation et
   l'accessibilité. On style donc son état FLOTTÉ pour qu'il ressemble aux « PRÉNOM » du calque.
   ============================================================================================ */

/* ---- Intertitres d'étape --------------------------------------------------------------------
   « Coordonnées », « Adresse de livraison », « Options de paiement » deviennent les
   « VOS COORDONNÉES » du calque. */

body.woocommerce-checkout .wc-block-components-checkout-step__title,
body.woocommerce-checkout .wc-block-components-title {
  font-family: var(--mono);
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ambre);
}
/* Le numéro d'étape, dans son cercle. */
body.woocommerce-checkout .wc-block-components-checkout-step--with-step-number
  .wc-block-components-checkout-step__title::before {
  color: var(--ambre);
  font-family: var(--mono);
}
body.woocommerce-checkout .wc-block-components-checkout-step__description { color: var(--gris); }

/* ---- Étiquettes flottantes -------------------------------------------------------------------
   Au repos elles tiennent lieu d'invite ; une fois flottées, elles deviennent l'étiquette. C'est
   ce second état qu'on aligne sur le calque. */

body.woocommerce-checkout .wc-block-components-text-input.is-active label,
body.woocommerce-checkout .wc-blocks-components-select__label {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gris-2);
}

/* ---- Choix en liste : livraison ET paiement --------------------------------------------------
   Un encadré par option, ambre à la sélection — le vocabulaire des onglets du calque.
   `:has()` n'est pas utilisé : WooCommerce pose déjà une classe sur l'option cochée, et une
   classe explicite se relit mieux qu'un sélecteur qui déduit. */

/* ⚠️ LE PADDING GAUCHE N'EST PAS DÉCORATIF. Le bouton radio est en position ABSOLUE, à 16 px
   du bord ; WooCommerce réserve sa place par `padding-left: 48px`. Une règle qui écrit
   `padding: 0.9rem 1rem` efface cette réserve, et le libellé passe SOUS le bouton — constaté
   le 21.08.2026, « Twint (Payrexx) » s'affichait « …int (Payrexx) ». Les 3rem valent 48 px. */
body.woocommerce-checkout .wc-block-components-radio-control__option {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 2px;
  margin-bottom: 0.5rem;
  padding: 0.9rem 1rem 0.9rem 3rem;
  color: var(--blanc);
  transition: border-color 0.2s, background 0.2s;
}
body.woocommerce-checkout .wc-block-components-radio-control__option:hover { border-color: var(--gris); }
body.woocommerce-checkout .wc-block-components-radio-control__option-checked {
  border-color: var(--ambre);
  background: rgba(232, 199, 154, 0.07);
  box-shadow: none;
}
body.woocommerce-checkout .wc-block-components-radio-control__label { color: var(--blanc); }
body.woocommerce-checkout .wc-block-components-radio-control__secondary-label,
body.woocommerce-checkout .wc-block-components-radio-control__description {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: var(--gris-2);
}
/* Le liseré que les blocs dessinent autour de l'option cochée, en blanc dur. */
body.woocommerce-checkout .wc-block-components-radio-control-accordion-option--checked-option-highlighted,
body.woocommerce-checkout .wc-block-components-radio-control--highlight-checked
  .wc-block-components-radio-control__option-checked {
  box-shadow: inset 0 0 0 1px var(--ambre);
}

/* Les logos des moyens de paiement gardent leur fond : une marque se reconnaît à ses couleurs,
   et un logo détouré sur fond sombre devient illisible. On se contente de les cadrer. */
body.woocommerce-checkout .wc-block-components-radio-control__option img,
body.woocommerce-checkout .wc-block-components-payment-method-icons img {
  border-radius: 2px;
  max-height: 24px;
  width: auto;
}

/* ---- Code promo ------------------------------------------------------------------------------
   Le panneau repliable était une ligne grise perdue entre deux totaux. Il devient un bloc qu'on
   voit, sans devenir un appel à chercher un code qu'on n'a pas. */

body.woocommerce-cart .wc-block-components-panel,
body.woocommerce-checkout .wc-block-components-panel {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin: 0.9rem 0;
  padding: 0.2rem 0;
}
/* Le déclencheur du code promo était gris sur noir, collé au bord, entre deux totaux : on ne le
   voyait pas. Il passe en ambre — la couleur de ce sur quoi on peut agir dans ce site — et
   retrouve la marge latérale du panneau qui l'entoure. Assez visible pour être trouvé, assez
   discret pour ne pas envoyer chercher un code qu'on n'a pas. */
body.woocommerce-cart .wc-block-components-panel__button,
body.woocommerce-checkout .wc-block-components-panel__button {
  color: var(--ambre);
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.9rem 1.2rem 0.9rem 2rem;
  width: 100%;
  text-align: left;
}
body.woocommerce-cart .wc-block-components-panel__button:hover,
body.woocommerce-checkout .wc-block-components-panel__button:hover { color: var(--blanc); }
body.woocommerce-cart .wc-block-components-panel__button-icon,
body.woocommerce-checkout .wc-block-components-panel__button-icon { fill: currentColor; }
body.woocommerce-cart .wc-block-components-panel__content,
body.woocommerce-checkout .wc-block-components-panel__content { padding: 0 1.2rem 1.1rem 2rem; }
/* Le champ et son bouton sur une ligne, à hauteur égale. Sans ça, le bouton flotte au-dessus
   du champ et l'ensemble a l'air cassé. */
body.woocommerce-cart .wc-block-components-totals-coupon__form,
body.woocommerce-checkout .wc-block-components-totals-coupon__form {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
}
body.woocommerce-cart .wc-block-components-totals-coupon__input,
body.woocommerce-checkout .wc-block-components-totals-coupon__input { flex: 1 1 auto; margin: 0; }
body.woocommerce-cart .wc-block-components-totals-coupon__button,
body.woocommerce-checkout .wc-block-components-totals-coupon__button { flex: 0 0 auto; min-height: 44px; }

/* ---- Cases à cocher --------------------------------------------------------------------------- */

body.woocommerce-checkout .wc-block-components-checkbox__input { accent-color: var(--ambre); }
body.woocommerce-checkout .wc-block-components-checkbox__label { color: var(--gris-2); line-height: 1.5; }
body.woocommerce-checkout .wc-block-components-checkbox__label a { color: var(--ambre); }

/* ---- Le titre de la page ------------------------------------------------------------------------
   Sérif, comme les titres du site. Le libellé lui-même vient de la page WordPress, pas d'ici. */

body.woocommerce-cart .wp-block-post-title,
body.woocommerce-checkout .wp-block-post-title,
body.woocommerce-cart .entry-title,
body.woocommerce-checkout .entry-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2rem, 5vw, 3.2rem);
  line-height: 1.05;
  color: var(--blanc);
  margin-bottom: 1.6rem;
}

/* ---- La sortie du tunnel ----------------------------------------------------------------------
   ⚠️ Les règles de `.page__galerie` ont déménagé dans `style.css` le 21.08. Elles habillent un
   bouton posé par `page.php`, donc présent sur des pages qui ne sont PAS des pages WooCommerce —
   les textes légaux, par exemple. Ici, elles n'étaient chargées que dans le tunnel : le même
   bouton sortait nu partout ailleurs. */

/* ---- Les bandeaux d'avertissement -------------------------------------------------------------
   WooCommerce les rend en rose pâle bordé de rouge, ce qui, sur un site noir, ressemble à une
   erreur du site plutôt qu'à un message. Relevé le 21.08 sur le panier : un bandeau **vide** —
   l'icône, la croix, et rien entre les deux. Un bandeau qui ne dit rien n'a rien à occuper.

   Deux règles, donc : l'habillage de la maison, et la disparition pure et simple quand le
   contenu est vide. `:has()` fait le travail dans les navigateurs qui le connaissent ; les
   autres retombent sur un bandeau sombre, lisible, au lieu du rose. */
.wc-block-components-notice-banner {
  background: var(--surface);
  color: var(--blanc);
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-radius: 2px;
}
.wc-block-components-notice-banner.is-error   { border-left-color: var(--rouge); }
.wc-block-components-notice-banner.is-success { border-left-color: var(--vert); }
.wc-block-components-notice-banner.is-info,
.wc-block-components-notice-banner.is-warning { border-left-color: var(--ambre); }
.wc-block-components-notice-banner > svg { fill: currentColor; opacity: 0.7; }
.wc-block-components-notice-banner__content { color: var(--blanc); }
.wc-block-components-notice-banner a { color: var(--ambre); }

/* Le bandeau sans message ne s'affiche pas. */
.wc-block-components-notice-banner:not(:has(.wc-block-components-notice-banner__content:not(:empty))) { display: none; }
.wc-block-components-notice-banner__content:empty { display: none; }