/* ─────────────────────────────────────────────────────────────────────────────
 * amo-statut — messages de statut Amosphère.
 *
 * Remplace la palette d'alerte Tailwind par défaut (#F1F6F2, #F1F4FA, #FBF0ED,
 * #FBF6EC…) qui était recopiée à la main dans une quarantaine de gabarits et
 * n'avait aucun accord avec le navy / terracotta de la charte.
 *
 * Parti pris retenu : « typographique pur » — aucun aplat, aucun encadré. La
 * couleur ne subsiste que dans l'icône et dans le texte ; un filet sépare le
 * message du contenu. Les quatre tons partagent la même désaturation et la même
 * clarté : ils forment une famille au lieu de quatre signaux concurrents.
 *
 * Répartition des rôles (voir aussi amo-ui.js) :
 *   — confirmation d'une action  → toast, transitoire, avec décompte ;
 *   — information permanente     → .amo-msg, reste à l'écran ;
 *   — erreur de formulaire       → .flash-error, reste à l'écran près du champ.
 * ───────────────────────────────────────────────────────────────────────────── */

:root {
  /* Palette de statut dérivée de la charte (navy #0e295c / terracotta #e1622b) */
  --amo-ok-tr:#1F6F4A;   --amo-ok-tx:#17553A;
  --amo-info-tr:#2B4C86; --amo-info-tx:#1E3A6B;
  --amo-att-tr:#E8A317;  --amo-att-tx:#7E5707;
  --amo-dgr-tr:#D1351A;  --amo-dgr-tx:#A32A14;
  --amo-filet:#E5E8EF;
}

/* ── Socle commun ────────────────────────────────────────────────────────── */
/* Les gabarits écrivent <div class="flash-{{ category }}">…</div> : les cinq
   catégories émises par flash() sont donc toutes déclarées ici, y compris
   'danger', synonyme de 'error' côté serveur. */
.flash-success, .flash-error, .flash-danger, .flash-warning, .flash-info,
.amo-msg {
  /* `block` et non `flex` : le message contient du texte enrichi (<strong>,
     liens) directement dans le conteneur. En flex, chaque fragment devient un
     élément de flux séparé et la phrase se disloque en colonnes. L'icône est
     donc placée en absolu, et le texte réserve sa gouttière par un retrait. */
  display: block;
  position: relative;
  /* Remises à zéro : ces classes portaient un aplat, une bordure et un rayon
     dans chaque gabarit ; la déclaration locale disparaît, mais un gabarit
     oublié ne doit pas réintroduire une boîte à moitié stylée. */
  background: none;
  border: 0;
  border-bottom: 1px solid var(--amo-filet);
  border-radius: 0;
  padding: 12px 0 14px 27px;
  margin: 0 0 18px;
  font-family: 'Outfit', sans-serif;
  font-size: 13.5px;
  line-height: 1.6;
  max-width: none;
}

/* `display: block` ci-dessus a la même spécificité que le `display: none` de
   l'attribut natif [hidden] — sans ce filet, l'ordre d'application du
   navigateur peut faire gagner le bloc et afficher un message vide (juste
   l'icône). amo-requis.js s'appuie sur [hidden] pour la zone de récapitulatif
   créée en tête de formulaire : ce filet lui est notamment destiné. */
.flash-success[hidden], .flash-error[hidden], .flash-danger[hidden],
.flash-warning[hidden], .flash-info[hidden], .amo-msg[hidden] {
  display: none;
}

/* L'icône est produite en CSS : les gabarits n'ont aucun balisage à ajouter. */
.flash-success::before, .flash-error::before, .flash-danger::before,
.flash-warning::before, .flash-info::before,
.amo-msg::before {
  content: '';
  position: absolute;
  left: 0;
  top: 14px;
  width: 17px;
  height: 17px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* ── Les quatre tons ─────────────────────────────────────────────────────── */
.flash-success, .amo-msg.est-ok { color: var(--amo-ok-tx); }
.flash-success::before, .amo-msg.est-ok::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F6F4A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}

.flash-info, .amo-msg.est-info { color: var(--amo-info-tx); }
.flash-info::before, .amo-msg.est-info::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232B4C86' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 7.6v.6'/%3E%3C/svg%3E");
}

.flash-warning, .amo-msg.est-att { color: var(--amo-att-tx); }
.flash-warning::before, .amo-msg.est-att::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E8A317' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4.5L2.8 20h18.4L12 4.5z'/%3E%3Cpath d='M12 10v4M12 17.2v.4'/%3E%3C/svg%3E");
}

.flash-error, .flash-danger, .amo-msg.est-dgr { color: var(--amo-dgr-tx); }
.flash-error::before, .flash-danger::before, .amo-msg.est-dgr::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D1351A' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M15 9l-6 6M9 9l6 6'/%3E%3C/svg%3E");
}

/* Une erreur de formulaire est le seul message qu'on doit trouver du regard en
   revenant sur la page : elle garde un poids typographique supérieur. */
.flash-error, .flash-danger { font-weight: 500; }

/* Les liens et emphases gardent la teinte du message, sans le terracotta des
   liens ordinaires qui entrerait en concurrence avec le signal de statut. */
.flash-success a, .flash-error a, .flash-danger a, .flash-warning a,
.flash-info a, .amo-msg a { color: inherit; text-decoration: underline; }
.flash-success strong, .flash-error strong, .flash-danger strong,
.flash-warning strong, .flash-info strong, .amo-msg strong { font-weight: 600; }

/* ── Information permanente avec intitulé ────────────────────────────────── */
/* Variante à deux niveaux, pour les encarts qui ont un titre propre (quota,
   avertissement factures, réserve d'antériorité ESSENTIEL…). */
.amo-msg .amo-msg-corps { min-width: 0; }
.amo-msg .amo-msg-lbl {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .9px;
  text-transform: uppercase;
  margin-bottom: 3px;
}
.amo-msg .amo-msg-txt { color: #596475; display: block; }
.amo-msg.est-ok   .amo-msg-lbl { color: var(--amo-ok-tr); }
.amo-msg.est-info .amo-msg-lbl { color: var(--amo-info-tr); }
.amo-msg.est-att  .amo-msg-lbl { color: var(--amo-att-tr); }
.amo-msg.est-dgr  .amo-msg-lbl { color: var(--amo-dgr-tr); }

/* Dernier message d'une pile : pas de filet orphelin avant le contenu. */
.amo-msg.sans-filet, .flash-wrap > :last-child { border-bottom: 0; }

/* ── Zone dangereuse (suppression de compte, résiliation) ────────────────── */
/* La gravité est portée par le texte et par le bouton, pas par un fond rose
   permanent qui criait aussi fort que l'avertissement secondaire. */
.amo-zone-danger {
  background: #fff;
  border: 1px solid var(--amo-filet);
  border-radius: 14px;
  padding: 24px 26px;
}
.amo-zone-danger .amo-zd-titre {
  font-size: 16px;
  font-weight: 600;
  color: #0e295c;
  margin: 0 0 7px;
}
.amo-zone-danger .amo-zd-texte {
  font-size: 13.5px;
  line-height: 1.65;
  color: #596475;
  margin: 0 0 16px;
}
/* Avertissement secondaire : un filet, pas un second aplat. */
.amo-zone-danger .amo-zd-note {
  border-left: 3px solid var(--amo-att-tr);
  padding: 2px 0 2px 15px;
  margin: 0 0 18px;
  font-size: 13px;
  line-height: 1.6;
  color: #596475;
}
.amo-zone-danger .amo-zd-note strong { color: #0e295c; font-weight: 600; }
.amo-zone-danger .amo-zd-btn {
  display: inline-block;
  background: none;
  border: 1.5px solid var(--amo-dgr-tr);
  color: var(--amo-dgr-tr);
  border-radius: 9px;
  padding: 11px 20px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color .16s, color .16s;
  text-decoration: none;
}
.amo-zone-danger .amo-zd-btn:hover,
.amo-zone-danger .amo-zd-btn:focus-visible {
  background: var(--amo-dgr-tr);
  color: #fff;
}
.amo-zone-danger .amo-zd-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Mobile ──────────────────────────────────────────────────────────────── */
/* Sans encadré, un message doit rester distinct du texte courant sur un écran
   étroit : on garde l'icône alignée en haut et on aère le filet. */
@media (max-width: 640px) {
  .flash-success, .flash-error, .flash-danger, .flash-warning, .flash-info,
  .amo-msg {
    font-size: 14px;
    padding: 12px 0 14px 26px;
    margin-bottom: 16px;
  }
  .amo-zone-danger { padding: 20px 18px; border-radius: 12px; }
  .amo-zone-danger .amo-zd-btn {
    display: block;
    width: 100%;
    text-align: center;
    padding: 13px 20px;   /* cible tactile */
  }
}

/* ── Contrastes renforcés ────────────────────────────────────────────────── */
@media (prefers-contrast: more) {
  .flash-success, .amo-msg.est-ok   { color: #0F3D28; }
  .flash-info,    .amo-msg.est-info { color: #14294D; }
  .flash-warning, .amo-msg.est-att  { color: #5A3C0B; }
  .flash-error, .flash-danger, .amo-msg.est-dgr { color: #711D0E; }
}

/* ─────────────────────────────────────────────────────────────────────────────
 * .notice — encarts d'information permanents (Mon compte, mot de passe oublié).
 * Le balisage existant est conservé tel quel : .notice > .notice-ico +
 * .notice-body > .notice-title + .notice-text (+ .notice-cta). Seul le rendu
 * change : plus de fond teinté ni de barre d'accent, la couleur reste dans
 * l'icône et l'intitulé.
 * ───────────────────────────────────────────────────────────────────────────── */
.notice {
  position: relative;
  display: flex;
  gap: 11px;
  align-items: flex-start;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--amo-filet);
  border-radius: 0;
  padding: 13px 0 15px;
  margin-bottom: 18px;
  overflow: visible;
}
.notice::before { content: none; }   /* neutralise l'ancienne barre d'accent */

/* L'icône perd sa pastille teintée : elle ne garde que son trait de couleur. */
.notice .notice-ico {
  width: auto;
  height: auto;
  background: none !important;
  border-radius: 0;
  flex-shrink: 0;
  margin-top: 2px;
}
.notice .notice-ico svg { width: 17px; height: 17px; stroke-width: 2; fill: none; }

.notice .notice-body { flex: 1; min-width: 0; }
.notice .notice-title {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .9px;
  text-transform: uppercase;
  margin-bottom: 3px;
}
.notice .notice-text { font-size: 13.5px; line-height: 1.6; color: #596475; }
.notice .notice-text strong { font-weight: 600; color: #0e295c; }
.notice .notice-text a { color: inherit; text-decoration: underline; font-weight: 600; }

/* Bouton d'action de l'encart : contour seul, il ne doit pas concurrencer
   l'action principale de la page. */
.notice .notice-cta {
  margin-top: 11px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 500;
  padding: 8px 15px;
  border-radius: 9px;
  cursor: pointer;
  font-family: 'Outfit', sans-serif;
  text-decoration: none;
  background: transparent;
  transition: background-color .16s, color .16s;
}

.notice-blue  .notice-ico, .notice-blue  .notice-title { color: var(--amo-info-tr); }
.notice-amber .notice-ico, .notice-amber .notice-title { color: var(--amo-att-tr); }
.notice-vert  .notice-ico, .notice-vert  .notice-title { color: var(--amo-ok-tr); }

/* Thème Or Soleil : les avertissements amber sont encadrés d'un rectangle de la
   même couleur, pour marquer l'information à retenir (hors danger-card, resté
   sobre — voir plus bas). */
.notice-amber { border: 1.5px solid var(--amo-att-tr); border-radius: 10px; padding: 14px 16px; }
.notice-rouge .notice-ico, .notice-rouge .notice-title { color: var(--amo-dgr-tr); }
.notice-blue  .notice-cta { border: 1.5px solid var(--amo-info-tr); color: var(--amo-info-tr); }
.notice-amber .notice-cta { border: 1.5px solid var(--amo-att-tr);  color: var(--amo-att-tr); }
.notice-vert  .notice-cta { border: 1.5px solid var(--amo-ok-tr);   color: var(--amo-ok-tr); }
.notice-rouge .notice-cta { border: 1.5px solid var(--amo-dgr-tr);  color: var(--amo-dgr-tr); }
.notice-blue  .notice-cta:hover { background: var(--amo-info-tr); color: #fff; }
.notice-amber .notice-cta:hover { background: var(--amo-att-tr);  color: #fff; }
.notice-vert  .notice-cta:hover { background: var(--amo-ok-tr);   color: #fff; }
.notice-rouge .notice-cta:hover { background: var(--amo-dgr-tr);  color: #fff; }
/* Deux actions côte à côte (ex. compte suspendu : voir le motif + règles de modération) —
   la seconde reste en simple lien souligné, pour ne pas concurrencer la première. */
.notice .notice-cta + .notice-cta-lien {
  margin-top: 11px;
  margin-left: 10px;
  font-size: 12.5px;
  font-weight: 500;
  color: inherit;
  text-decoration: underline;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * .danger-card — zone de suppression du compte (balisage existant conservé).
 * Traitement « sobre » : la gravité est portée par le texte et par le bouton,
 * pas par un aplat rose permanent qui criait aussi fort que l'avertissement
 * secondaire logé à l'intérieur.
 * ───────────────────────────────────────────────────────────────────────────── */
.danger-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--amo-filet);
  border-radius: 14px;
  padding: 24px 26px;
  margin-bottom: 18px;
  overflow: visible;
}
.danger-card::before { content: none; }   /* neutralise la barre rouge */
.danger-title {
  font-size: 16px;
  font-weight: 600;
  color: #0e295c;
  letter-spacing: -.1px;
  margin-bottom: 7px;
}
.danger-desc {
  font-size: 13.5px;
  line-height: 1.65;
  color: #596475;
  font-weight: 400;
  margin-bottom: 16px;
}
/* L'avertissement interne redescend au rang d'annotation : un filet, pas un
   second aplat empilé sur le premier. */
.danger-card .notice {
  border: 0;
  border-radius: 0;
  border-left: 3px solid var(--amo-att-tr);
  padding: 2px 0 2px 15px;
  margin-bottom: 18px;
  gap: 0;
}
.danger-card .notice .notice-ico { display: none; }
.danger-card .notice .notice-text { font-size: 13px; }

.btn-danger {
  background: none;
  color: var(--amo-dgr-tr);
  border: 1.5px solid var(--amo-dgr-tr);
  border-radius: 9px;
  padding: 11px 20px;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  font-family: 'Outfit', sans-serif;
  transition: background-color .16s, color .16s;
}
.btn-danger:hover, .btn-danger:focus-visible {
  background: var(--amo-dgr-tr);
  color: #fff;
  border-color: var(--amo-dgr-tr);
}

/* Résiliation d'abonnement : contour rouge pâle au repos, rempli au survol —
   la couleur pleine prévient de la nature de l'action avant le clic. Le gabarit
   (largeur, rayon, hauteur) est celui de la barre d'actions, cf. .abo-btn : ici
   on ne fixe que la couleur, pour que les trois boutons restent identiques. */
.btn-resilier {
  background: transparent;
  color: var(--amo-dgr-tr);
  border-color: #E4D3CD;
  font-family: 'Outfit', sans-serif;
  cursor: pointer;
}
.btn-resilier:hover, .btn-resilier:focus-visible {
  background: var(--amo-dgr-tr);
  border-color: var(--amo-dgr-tr);
  color: #fff;
}

/* Action de suppression, partout sur le site (recommandations, annonces, forum...) :
   même contour rouge pâle au repos et même rouge plein au survol que .btn-resilier /
   .btn-danger de Mon compte. Classe additive : ne fixe que la couleur, se pose sur
   n'importe quel bouton existant (gabarit, taille) sans le remplacer. */
.btn-danger-outline {
  color: var(--amo-dgr-tr);
  border-color: #F0C4BE;
}
.btn-danger-outline:hover, .btn-danger-outline:focus-visible {
  background: var(--amo-dgr-tr);
  border-color: var(--amo-dgr-tr);
  color: #fff;
}

/* Bandeau d'abonnement échu : même traitement typographique. */
.expire-banner {
  background: none;
  border: 0;
  border-bottom: 1px solid var(--amo-filet);
  border-radius: 0;
  padding: 13px 0 15px;
  margin-bottom: 16px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.expire-banner svg { flex-shrink: 0; margin-top: 2px; stroke: var(--amo-att-tr); }
.expire-banner-text { font-size: 13.5px; color: var(--amo-att-tx); line-height: 1.6; }
.expire-banner-text strong { font-weight: 600; }

@media (max-width: 640px) {
  .danger-card { padding: 20px 18px; border-radius: 12px; }
  .btn-danger { display: block; width: 100%; padding: 13px 20px; }
  .notice .notice-text { font-size: 14px; }
  .notice .notice-cta { padding: 11px 16px; }
}