/*
 * Boutique Design : module Messages.
 *
 * Les messages de WooCommerce (« … a été ajouté à votre panier », « Confirmez
 * votre adresse e-mail… », erreurs de formulaire) et les boutons qu'ils
 * contiennent prennent les couleurs et la police de la boutique, a la place du
 * gris, du bleu et du violet de WooCommerce.
 *
 * Priorite : WooCommerce, le theme et les widgets d'Elementor visent deja ces
 * elements avec de longs selecteurs (jusqu'a 0,6,1 pour le survol des boutons
 * dans le widget Mon compte, qui rend leur fond transparent). Plutot que
 * d'empiler des classes, les selecteurs passent par :is(…, #dilo-priorite) :
 * l'identifiant n'existe dans aucune page, il ne sert qu'a donner a la regle le
 * poids d'un identifiant, et donc a passer devant toutes ces regles, etats de
 * survol compris, sans recourir a !important.
 */

/* ------------------------------------------------------------------ *
 * 1. Le cadre
 * ------------------------------------------------------------------ */

:is(.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notice):is(*, #dilo-priorite) {
  color: var(--dilo-texte-doux);
  background: var(--dilo-doux);
  border: 1px solid var(--dilo-ligne-appuyee);
  border-radius: var(--dilo-rayon-champ);
  font-family: var(--dilo-police);
  font-size: 15px;
  line-height: 1.5;
}

:is(.woocommerce-message, .woocommerce-info, .woocommerce-notice):is(*, #dilo-priorite)::before {
  color: var(--dilo-primaire);
}

/* Les erreurs gardent leur rouge : c'est un signal, pas une decoration. */
.woocommerce-error:is(*, #dilo-priorite) {
  color: var(--dilo-erreur-sombre);
  background: rgba(180, 35, 24, .05);
  border-color: rgba(180, 35, 24, .25);
}

.woocommerce-error:is(*, #dilo-priorite)::before {
  color: var(--dilo-erreur);
}

/* ------------------------------------------------------------------ *
 * 2. Les boutons
 * ------------------------------------------------------------------ */

/*
 * Pas de regle de survol : le bouton garde la meme apparence au survol, et le
 * poids de cette regle l'emporte sur les survols de WooCommerce et d'Elementor.
 */
:is(.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notice) :is(a, button):is(.button, #dilo-priorite) {
  float: right;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  margin: -4px 0 -4px 16px;
  padding: 9px 18px;
  color: #FFFFFF;
  background: var(--dilo-primaire);
  border: 1px solid var(--dilo-primaire);
  border-radius: 999px;
  box-shadow: none;
  font-family: var(--dilo-police);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  text-transform: none;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
}

:is(.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notice) :is(a, button):is(.button, #dilo-priorite):focus-visible {
  outline: 2px solid var(--dilo-accent);
  outline-offset: 2px;
}

/* ------------------------------------------------------------------ *
 * 3. Telephone
 * ------------------------------------------------------------------ */

/*
 * Sur telephone, le bouton passe sous le texte : a cote, il ecrasait la phrase
 * sur deux ou trois mots par ligne. Selon le message, WooCommerce ecrit le
 * bouton avant ou apres le texte : order le range toujours en dernier.
 */
@media (max-width: 600px) {
  :is(.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notice):has(> .button) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  /* Le nettoyage de flottants de WooCommerce deviendrait une case vide, et un
     espace en trop au-dessus du texte. */
  :is(.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notice):has(> .button)::after {
    display: none;
  }

  :is(.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notice) :is(a, button):is(.button, #dilo-priorite) {
    order: 1;
    float: none;
    margin: 0;
    white-space: normal;
  }
}