/* Plaine Altitude, système de design V4 : alertes et messages (2026-10-13, cahier des charges § 4, éléments transverses).
   Un seul modèle pour tous les retours d'action :
   - bandeau dans la page : .pa-alerte + --succes | --erreur | --info | --attention ; icône posée par la feuille (rien à écrire
     dans la page), titre <b> facultatif, texte, lien d'action .pa-alerte__action, croix .pa-alerte__fermer ;
   - bulle temporaire en bas de l'écran : .pa-bulle (+ --succes | --erreur), 5 s, avec « Annuler » quand c'est possible ;
   - champ en erreur : .pa-champ.is-erreur suivi de .pa-champ-aide (message sous le champ, avec icône).
   Les messages de WooCommerce (.woocommerce-message, -info, -error) prennent le même modèle : le thème n'a rien à réécrire. */

:root {
  --ico-succes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='m7.8 12.3 2.9 2.9 5.6-6'/%3E%3C/svg%3E");
  --ico-erreur: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 7v6M12 16.6v.2'/%3E%3C/svg%3E");
  --ico-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 11v6M12 7.4v.2'/%3E%3C/svg%3E");
  --ico-attention: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 2.4 17.6A2 2 0 0 0 4.1 20.6h15.8a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z'/%3E%3Cpath d='M12 9v4.5M12 16.8v.2'/%3E%3C/svg%3E");
  --ico-croix: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E");
  --attention: #9a6200; --attention-bg: #fff6df; --attention-bord: #f1d48c;
}

/* ── Bandeau dans la page ── */
:is(.pa-alerte, .woocommerce-message, .woocommerce-info, .woocommerce-error) {
  --c: var(--info); --fond: var(--info-bg); --trait: rgba(11,122,121,.22); --ico: var(--ico-info);
  position: relative; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.35rem 0.75rem; margin: 0; padding: 0.85rem 1rem;
  border-radius: 10px; border: 1px solid var(--trait); background: var(--fond); list-style: none;
  font: 600 var(--fs-sm)/1.45 var(--font-texte); color: var(--fg-titre);
}
:is(.pa-alerte, .woocommerce-message, .woocommerce-info, .woocommerce-error)::before {
  content: ""; flex: none; width: 1.2rem; height: 1.2rem; margin-top: 0.05rem; background: var(--c);
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
}
:is(.pa-alerte--succes, .woocommerce-message) { --c: var(--succes); --fond: var(--succes-bg); --trait: rgba(31,138,76,.25); --ico: var(--ico-succes); }
:is(.pa-alerte--erreur, .woocommerce-error) { --c: var(--erreur); --fond: var(--erreur-bg); --trait: rgba(196,54,43,.25); --ico: var(--ico-erreur); }
.pa-alerte--attention, .pa-alerte--alerte { --c: var(--attention); --fond: var(--attention-bg); --trait: var(--attention-bord); --ico: var(--ico-attention); }
.pa-alerte > svg { display: none; }                         /* anciennes alertes V1 à icône dans la page : l'icône vient de la feuille */
.pa-alerte__texte, .pa-alerte > span { flex: 1 1 12rem; min-width: 0; }
.pa-alerte__texte b { display: block; margin-bottom: 0.1rem; font: 800 var(--fs-base)/1.3 var(--font-titre); color: var(--fg-titre); }
.pa-alerte__texte ul { margin: 0.3rem 0 0; padding-left: 1.1rem; }
.pa-alerte__action, .woocommerce-message .button, .woocommerce-info .button {
  align-self: center; margin-left: auto; padding: 0; border: 0; background: none; cursor: pointer;
  font: 800 var(--fs-sm)/1.3 var(--font-texte); color: var(--fg-titre); text-decoration: underline; text-decoration-color: var(--c);
  text-decoration-thickness: 2px; text-underline-offset: 3px; white-space: nowrap;
}
.pa-alerte__action:hover, .woocommerce-message .button:hover { color: var(--c); }
.pa-alerte__fermer { align-self: center; display: grid; place-items: center; width: 1.8rem; height: 1.8rem; margin: -0.3rem -0.4rem -0.3rem 0; padding: 0; border: 0; border-radius: 6px; background: none; cursor: pointer; color: var(--fg-secondaire); }
.pa-alerte__fermer::before { content: ""; width: 0.95rem; height: 0.95rem; background: currentColor; -webkit-mask: var(--ico-croix) center / contain no-repeat; mask: var(--ico-croix) center / contain no-repeat; }
.pa-alerte__fermer:hover { background: rgba(41,39,40,.06); color: var(--fg-titre); }
.pa-alerte--espace { margin-top: 0.8rem; }
.pa-alerte[hidden] { display: none !important; }
/* WooCommerce : la liste d'erreurs est un <ul>, une erreur par <li> */
.woocommerce-error { flex-direction: column; padding-left: 2.95rem; }
.woocommerce-error::before { position: absolute; left: 1rem; top: 0.85rem; }
.woocommerce-error li { margin: 0; }
.woocommerce-notices-wrapper { display: grid; gap: 0.6rem; margin-bottom: var(--sp-s); }
.woocommerce-notices-wrapper:empty { display: none; }

/* ── Bulle temporaire (ajout, retrait avec « Annuler », copie du lien…) ── */
.pa-bulle { position: fixed; left: 50%; bottom: 1.25rem; z-index: 140; transform: translateX(-50%); display: flex; align-items: center; gap: 0.7rem 1rem; max-width: calc(100vw - 2rem); box-sizing: border-box; padding: 0.8rem 1rem; border-radius: 10px; background: var(--pa-noir); color: #fff; font: 600 var(--fs-sm)/1.3 var(--font-texte); box-shadow: 0 10px 30px rgba(41,39,40,.3); animation: nl-fondu 200ms ease; }
.pa-bulle[hidden] { display: none; }
.pa-bulle button { padding: 0; border: 0; background: none; font: 800 var(--fs-sm)/1 var(--font-texte); color: var(--pa-turquoise); cursor: pointer; }
.pa-bulle--succes::before, .pa-bulle--erreur::before { content: ""; flex: none; width: 1.15rem; height: 1.15rem; background: var(--pa-turquoise); -webkit-mask: var(--ico-succes) center / contain no-repeat; mask: var(--ico-succes) center / contain no-repeat; }
.pa-bulle--erreur::before { background: #ff8a7f; -webkit-mask-image: var(--ico-erreur); mask-image: var(--ico-erreur); }
.pa-bulle--fixe { position: static; transform: none; animation: none; }   /* planche des composants */
@media (max-width: 999px) { .pa-bulle { bottom: calc(4.75rem + 0.75rem); } }

/* ── Champ en erreur : message sous le champ, avec icône ── */
.pa-champ.is-erreur + .pa-champ-aide { display: flex; gap: 0.35rem; align-items: flex-start; font-weight: 700; }
.pa-champ.is-erreur + .pa-champ-aide::before { content: ""; flex: none; width: 0.95rem; height: 0.95rem; margin-top: 0.1rem; background: var(--erreur); -webkit-mask: var(--ico-erreur) center / contain no-repeat; mask: var(--ico-erreur) center / contain no-repeat; }