/* La note d'explication : ce que montre un bloc, comment le lire, une précision. La même partout (site et admin) :
     <p class="lpa-note"><i class="fa-solid fa-circle-info" aria-hidden="true"></i>Texte <a class="text-link">…</a></p>
   Une icône en tête (facultative) prend la couleur miel ; un lien d'action (buttons.css, .text-link) à la suite. */
.lpa-note {
  margin: 0;
  padding: 8px 12px;
  border-left: 3px solid var(--gold);
  background: rgba(221, 162, 62, 0.07);
  color: var(--text);
  font-size: 0.9rem;
  font-style: normal;
  line-height: 1.45;
  text-align: left;
}
.lpa-note > i:first-child {
  margin-right: 8px;
  color: var(--gold);
}
.lpa-note strong,
.lpa-note b {
  color: var(--parchment);
}
.lpa-note a:not(.text-link) {
  color: var(--gold);
  text-decoration: underline;
}
/* Un lien d'action à la fin d'une note, à la suite du texte */
.lpa-note .text-link {
  margin: 0 0 0 10px;
  vertical-align: middle;
}

/* Les sortes de note (12 oct. 2026) : sans classe, une explication (miel) ; --success ce qui a réussi, --warning ce qui
   demande attention (lecture seule, à vérifier), --error ce qui a échoué. Avec une icône en tête (.has-icon, l'icône
   SVG de l'admin ou celle du site) : le texte passe à côté, aligné. */
.lpa-note--success { border-left-color: #63c25a; background: rgba(99, 194, 90, 0.08); }
.lpa-note--success > i:first-child, .lpa-note--success > svg:first-child { color: #63c25a; }
.lpa-note--warning { border-left-color: #e0892e; background: rgba(224, 137, 46, 0.09); }
.lpa-note--warning > i:first-child, .lpa-note--warning > svg:first-child { color: #e0892e; }
.lpa-note--error { border-left-color: var(--red-text, #e2553f); background: rgba(226, 85, 63, 0.09); }
.lpa-note--error > i:first-child, .lpa-note--error > svg:first-child { color: var(--red-text, #e2553f); }
.lpa-note.has-icon { display: flex; align-items: flex-start; gap: 10px; }
.lpa-note.has-icon > svg:first-child { flex: none; margin-top: 2px; color: var(--gold); }
.lpa-note.has-icon > i:first-child { margin: 3px 0 0; }