/* AyoPlus — les bandeaux de WooCommerce, repris au dessin de la section
   « Demande de produit » (.ayo-demande__notice).

   Un seul fichier pour toutes les pages : ces bandeaux ne sont l'affaire
   d'aucun écran en particulier. WooCommerce les imprime au panier, à la
   validation, sur « Mon compte », sur la boutique et sur la fiche produit, et
   les avoir dessinés cinq fois aurait fini par donner cinq dessins différents.

   Ce que WooCommerce et Astra posent à la place : un bloc gris, un filet
   coloré en haut, et une icône tirée de la police « WooCommerce » — un
   caractère (\e015, \e016, \e028) qui ne se met en forme qu'en jouant sur la
   couleur. Tout est repris ici : la teinte douce, l'accent à gauche, les
   angles arrondis, et une pastille SVG à la place du glyphe.

   La spécificité tient au « body » de tête : Astra et WooCommerce s'en tiennent
   à une classe, et rien ne garantit l'ordre de chargement des feuilles. Un
   sélecteur plus fort évite d'avoir à parier dessus — ou à écrire !important.

   Les écrans qui redessinent déjà un bandeau pour eux-mêmes gardent la main :
   ayo-checkout.css cible « .woocommerce-form-coupon-toggle .woocommerce-info »
   et « #payment .woocommerce-info », tous deux plus spécifiques que ceci. */

body .woocommerce-message,
body .woocommerce-error,
body .woocommerce-info {
  position: relative;
  /* Le bouton « Voir le panier » flotte à droite : sans contexte de bloc, il
     dépasserait du cadre dès que la phrase tient sur une ligne plus courte que
     lui. flow-root le contient sans le pseudo-élément de dégagement d'Astra. */
  display: flow-root;
  margin: 0 0 22px;
  /* La gouttière de gauche loge la pastille ; le reste suit le rythme de
     .ayo-demande__notice, à peine élargi pour la place prise par l'icône. */
  padding: 16px 20px 16px 54px;
  border: 0;
  border-left: 3px solid currentColor;
  border-radius: 12px;
  font-size: 15px;
  line-height: 1.55;
  list-style: none outside;
  width: auto;
  word-wrap: break-word;
}

/* Astra ouvre et ferme un flottement avec ces deux pseudo-éléments. Le ::before
   sert ici d'icône, et le ::after n'a plus rien à dégager : c'est le
   « display: flow-root » ci-dessus qui contient le bouton. */
body .woocommerce-message::after,
body .woocommerce-error::after,
body .woocommerce-info::after {
  content: none;
}

/* La pastille. « content » vidé et « font-size: 0 » suffisent à faire taire le
   glyphe de la police WooCommerce, quel que soit celui qu'Astra avait choisi ;
   le dessin vient ensuite de l'image de fond. */
body .woocommerce-message::before,
body .woocommerce-error::before,
body .woocommerce-info::before {
  content: "";
  position: absolute;
  top: 16px;
  left: 18px;
  display: block;
  width: 24px;
  height: 24px;
  margin: 0;
  padding: 0;
  font-size: 0;
  color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px 24px;
}

/* -- Succès -------------------------------------------------------------- */

body .woocommerce-message {
  /* currentColor dessine le filet : le vert de l'accent est donc porté par la
     couleur du texte, éclaircie juste assez pour rester lisible sur la teinte
     du fond — 3 px de bordure n'ont pas les mêmes exigences qu'une phrase. */
  color: #1c6b33;
  background: #f0faf3;
}

body .woocommerce-message::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%232f9e44'/%3E%3Cpath d='M7 12.4l3.3 3.3L17 8.9' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* -- Erreur -------------------------------------------------------------- */

body .woocommerce-error {
  color: #b3212c;
  background: #fff1f2;
}

body .woocommerce-error::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23ed2638'/%3E%3Cpath d='M12 6.6v7' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='17.4' r='1.35' fill='%23fff'/%3E%3C/svg%3E");
}

/* Plusieurs erreurs arrivent dans une même liste : elles s'empilent sous la
   pastille, séparées d'un souffle, plutôt que collées les unes aux autres. */
body .woocommerce-error li {
  margin: 0;
  padding: 0;
  list-style: none outside;
}

body .woocommerce-error li + li {
  margin-top: 6px;
}

/* -- Information --------------------------------------------------------- */

body .woocommerce-info {
  /* Le bleu de .ayo-notice, déjà celui des encadrés du panier. */
  color: #1e3a5f;
  border-left-color: #3b82f6;
  background: #eff6ff;
}

body .woocommerce-info::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%233b82f6'/%3E%3Cpath d='M12 11v6.4' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='7.2' r='1.35' fill='%23fff'/%3E%3C/svg%3E");
}

/* -- Les liens dans le texte --------------------------------------------- */

body .woocommerce-message > a:not(.button),
body .woocommerce-error a:not(.button),
body .woocommerce-info > a:not(.button) {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* -- Le bouton « Voir le panier » ---------------------------------------- */

/* WooCommerce imprime ce lien avant le texte et le fait flotter à droite ;
   l'ordre du balisage est le sien, on garde donc le flottement et on refait
   seulement le bouton — une pastille pleine à la couleur de l'accent.

   La classe du bandeau est répétée, ici seulement : Astra fait flotter ce
   bouton depuis « .woocommerce .woocommerce-message .button » — trois classes,
   une de plus que le reste du fichier n'en demande. La répétition rend la main
   sans !important, et sans dépendre de l'ordre des feuilles.

   Le fond est écrit en clair, type par type : « currentColor » se résout sur la
   couleur du bouton lui-même, qui passe en blanc pour son libellé — le fond
   serait blanc sur blanc. */
body .woocommerce-message.woocommerce-message .button,
body .woocommerce-error.woocommerce-error .button,
body .woocommerce-info.woocommerce-info .button {
  float: right;
  margin: -2px 0 0 18px;
  padding: 9px 18px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

body .woocommerce-message.woocommerce-message .button { background: #2f9e44; }
body .woocommerce-error.woocommerce-error .button     { background: #ed2638; }
body .woocommerce-info.woocommerce-info .button       { background: #3b82f6; }

body .woocommerce-message.woocommerce-message .button:hover,
body .woocommerce-message.woocommerce-message .button:focus,
body .woocommerce-error.woocommerce-error .button:hover,
body .woocommerce-error.woocommerce-error .button:focus,
body .woocommerce-info.woocommerce-info .button:hover,
body .woocommerce-info.woocommerce-info .button:focus {
  color: #fff;
  opacity: 0.88;
  transform: translateY(-1px);
}

/* -- Écrans étroits ------------------------------------------------------ */

@media (max-width: 560px) {
  /* Le lien « Voir le panier » précède le texte dans le balisage de
     WooCommerce : le déflotter le ferait simplement remonter au-dessus du
     message. La colonne flex remet les deux dans l'ordre lu, « order » se
     chargeant de renvoyer le bouton en dernier. Elle convient aussi bien au
     <div> d'un message qu'au <ul> d'une liste d'erreurs, dont les <li>
     s'empilent alors comme ils le faisaient déjà. */
  body .woocommerce-message,
  body .woocommerce-error,
  body .woocommerce-info {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 15px 16px 15px 48px;
    font-size: 14.5px;
  }

  /* La pastille reste absolue, donc hors de la colonne : un élément
     positionné ainsi n'est pas un élément flexible. */
  body .woocommerce-message::before,
  body .woocommerce-error::before,
  body .woocommerce-info::before {
    top: 15px;
    left: 15px;
    width: 22px;
    height: 22px;
    background-size: 22px 22px;
  }

  /* Un bouton flottant à droite d'une phrase de deux mots se retrouve seul sur
     une ligne à moitié vide : sous cette largeur il passe dessous, pleine
     largeur, où il se touche aussi mieux du pouce. */
  body .woocommerce-message.woocommerce-message .button,
  body .woocommerce-error.woocommerce-error .button,
  body .woocommerce-info.woocommerce-info .button {
    order: 1;
    float: none;
    margin: 12px 0 0;
    text-align: center;
  }
}