/* ==========================================================================
   Alnotra — blocs d'information / d'action (partials/notice.html.twig)
   --------------------------------------------------------------------------
   Un seul composant pour la section « Actions requises » du tableau de bord,
   la confirmation d'e-mail de la page profil et tout futur bandeau de compte.
   Il lit les jetons du dashboard quand il est rendu dans .dash-main, les
   jetons globaux --al-* ailleurs, et suit le thème sombre [data-bs-theme].
   Chargé une fois par layout_default.html.twig. Servi tel quel (pas de build).
   ========================================================================== */

.al-notice{
  --n-surface: var(--al-surface, #ffffff);
  --n-border: var(--al-border, #eaeaea);
  --n-text: var(--al-text, #14141a);
  --n-text-2: var(--al-text-secondary, #565f6b);
  --n-text-3: var(--al-text-muted, #5f6672);
  --n-radius: var(--radius-xl, 12px);
  --n-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, .06));
  --n-font: var(--font-sans, 'Inter', system-ui, sans-serif);
  --n-accent: #5b5bd6;  --n-accent-soft: #eeeefc;
  --n-warn: #c77800;    --n-warn-soft: #fdf3e1;
  --n-danger: #c93838;  --n-danger-soft: #fdecec;
  --n-ok: #0f9d58;      --n-ok-soft: #e6f6ec;
  --n-info: #2f5fd6;    --n-info-soft: #e9effd;
  --n-neutral: #5a5a66; --n-neutral-soft: #f1f1f4;
}
/* Dans le tableau de bord : mêmes couleurs que les cartes voisines. */
.dash-main .al-notice{
  --n-surface: var(--surface); --n-border: var(--border);
  --n-text: var(--text); --n-text-2: var(--text-2); --n-text-3: var(--text-3);
  --n-radius: var(--radius); --n-shadow: var(--shadow); --n-font: var(--font-sans);
  --n-accent: var(--accent); --n-accent-soft: var(--accent-soft);
  --n-warn: var(--warn); --n-warn-soft: var(--warn-soft);
  --n-danger: var(--danger); --n-danger-soft: var(--danger-soft);
  --n-ok: var(--ok); --n-ok-soft: var(--ok-soft);
}
[data-bs-theme="dark"] .al-notice{
  --n-surface: #17171d; --n-border: #26262e;
  --n-text: #ecedf1; --n-text-2: #a4a4b0; --n-text-3: #6d6d78;
  --n-accent-soft: #1f1f3a;
  --n-warn: #f0a050;    --n-warn-soft: rgba(240, 160, 80, .15);
  --n-danger: #f87171;  --n-danger-soft: rgba(248, 113, 113, .15);
  --n-ok: #34d399;      --n-ok-soft: rgba(52, 211, 153, .15);
  --n-info: #7ea2ff;    --n-info-soft: rgba(126, 162, 255, .15);
  --n-neutral: #a4a4b0; --n-neutral-soft: rgba(164, 164, 176, .12);
}

/* Ton → liseré, icône, pastille */
.al-notice--danger  { --n-tone: var(--n-danger);  --n-tone-soft: var(--n-danger-soft); }
.al-notice--warn    { --n-tone: var(--n-warn);    --n-tone-soft: var(--n-warn-soft); }
.al-notice--info    { --n-tone: var(--n-info);    --n-tone-soft: var(--n-info-soft); }
.al-notice--success { --n-tone: var(--n-ok);      --n-tone-soft: var(--n-ok-soft); }
.al-notice--neutral { --n-tone: var(--n-neutral); --n-tone-soft: var(--n-neutral-soft); }

/* Bloc */
.al-notice{
  position: relative; display: flex; align-items: flex-start; gap: 14px;
  padding: 16px 18px 16px 20px; margin: 0;
  background: var(--n-surface); border: 1px solid var(--n-border);
  border-radius: var(--n-radius); box-shadow: var(--n-shadow);
  color: var(--n-text); font-family: var(--n-font); overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
.al-notice *, .al-notice *::before, .al-notice *::after{ box-sizing: border-box; }
.al-notice .al-notice__stripe{ position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--n-tone); }
.al-notice .al-notice__icon{
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px;
  display: grid; place-items: center; background: var(--n-tone-soft); color: var(--n-tone);
}
.al-notice .al-notice__icon svg{ width: 18px; height: 18px; display: block; }
.al-notice .al-notice__body{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.al-notice .al-notice__head{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 20px; }
.al-notice .al-notice__title{
  margin: 0; padding: 0; font-family: inherit; font-size: 14px; font-weight: 600;
  line-height: 1.3; letter-spacing: -.01em; color: var(--n-text); text-transform: none;
}
.al-notice .al-notice__pill{
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600; line-height: 1.6; white-space: nowrap;
  background: var(--n-tone-soft); color: var(--n-tone);
}
.al-notice .al-notice__pill--danger  { background: var(--n-danger-soft);  color: var(--n-danger); }
.al-notice .al-notice__pill--warn    { background: var(--n-warn-soft);    color: var(--n-warn); }
.al-notice .al-notice__pill--info    { background: var(--n-info-soft);    color: var(--n-info); }
.al-notice .al-notice__pill--success { background: var(--n-ok-soft);      color: var(--n-ok); }
.al-notice .al-notice__pill--neutral { background: var(--n-neutral-soft); color: var(--n-neutral); }
.al-notice .al-notice__dot{ width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.al-notice .al-notice__text{ margin: 0; font-size: 13px; line-height: 1.5; color: var(--n-text-2); overflow-wrap: anywhere; }
.al-notice .al-notice__text b, .al-notice .al-notice__text strong{ color: var(--n-text); font-weight: 600; }
.al-notice .al-notice__steps{ margin: 2px 0 0; padding-left: 20px; list-style: decimal; font-size: 13px; line-height: 1.6; color: var(--n-text-2); }
.al-notice .al-notice__steps li{ padding-left: 2px; margin: 0; }
.al-notice .al-notice__steps li::marker{ color: var(--n-tone); font-weight: 600; }
.al-notice .al-notice__actions{ display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.al-notice .al-notice__btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 34px; padding: 0 14px; margin: 0; border-radius: 8px; border: 1px solid transparent;
  font-family: inherit; font-size: 12.5px; font-weight: 600; line-height: 1; white-space: nowrap;
  text-decoration: none; text-transform: none; cursor: pointer;
  transition: background .15s, color .15s, opacity .15s, border-color .15s;
}
.al-notice .al-notice__btn:focus-visible{ outline: none; box-shadow: 0 0 0 2px var(--n-surface), 0 0 0 4px var(--n-tone); }
.al-notice .al-notice__btn--primary{ background: var(--n-text); color: var(--n-surface); }
.al-notice .al-notice__btn--primary:hover{ opacity: .88; color: var(--n-surface); }
.al-notice .al-notice__btn--accent{ background: var(--n-accent); color: #fff; }
.al-notice .al-notice__btn--accent:hover{ opacity: .9; color: #fff; }
.al-notice .al-notice__btn--danger{ background: var(--n-danger); color: #fff; }
.al-notice .al-notice__btn--danger:hover{ opacity: .9; color: #fff; }
.al-notice .al-notice__btn--ghost{ background: transparent; color: var(--n-text-2); border-color: var(--n-border); }
.al-notice .al-notice__btn--ghost:hover{ color: var(--n-text); background: var(--n-tone-soft); border-color: var(--n-tone); }
.al-notice .al-notice__btn[aria-busy="true"], .al-notice .al-notice__btn:disabled{ opacity: .55; pointer-events: none; }
.al-notice .al-notice__link{ font-size: 12.5px; color: var(--n-text-2); text-decoration: underline; text-underline-offset: 3px; }
.al-notice .al-notice__link:hover{ color: var(--n-text); }
.al-notice .al-notice__meta{ margin: 0; font-size: 12px; line-height: 1.5; color: var(--n-text-3); }
.al-notice .al-notice__feedback{ margin-top: 2px; padding: 8px 10px; border-radius: 8px; font-size: 12.5px; line-height: 1.45; background: var(--n-tone-soft); color: var(--n-tone); }
.al-notice .al-notice__feedback--ok{ background: var(--n-ok-soft); color: var(--n-ok); }
.al-notice .al-notice__feedback--error{ background: var(--n-danger-soft); color: var(--n-danger); }

/* Variante « hero » : une seule par page, en tête (page profil) */
.al-notice--hero{ padding: 22px 24px 22px 26px; gap: 18px; }
.al-notice--hero .al-notice__icon{ width: 44px; height: 44px; border-radius: 12px; }
.al-notice--hero .al-notice__icon svg{ width: 22px; height: 22px; }
.al-notice--hero .al-notice__title{ font-size: 17px; letter-spacing: -.015em; }
.al-notice--hero .al-notice__text, .al-notice--hero .al-notice__steps{ font-size: 13.5px; }
.al-notice--hero .al-notice__btn{ height: 38px; padding: 0 16px; font-size: 13px; }

/* Empilement et section « Actions requises » */
.al-notice-stack{ display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 1100px){
  .al-notice-stack--cols{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .al-notice-stack--cols > :last-child:nth-child(odd){ grid-column: 1 / -1; }
}
.al-notice-section{ margin: 0 0 22px; }
.al-notice-section .al-notice-section__head{ display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.al-notice-section .al-notice-section__title{
  margin: 0; padding: 0; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-3, var(--al-text-muted, #8a8a94)); font-family: var(--font-sans, inherit); line-height: 1.4;
}
.al-notice-section .al-notice-section__count{
  font-family: var(--font-mono, ui-monospace, monospace); font-size: 11px; font-weight: 700; line-height: 1.6;
  padding: 0 7px; border-radius: 999px; background: #fdecec; color: #c93838;
}
[data-bs-theme="dark"] .al-notice-section .al-notice-section__count{ background: rgba(248, 113, 113, .15); color: #f87171; }

/* Mobile */
@media (max-width: 640px){
  .al-notice{ padding: 14px 14px 14px 17px; gap: 12px; }
  .al-notice--hero{ padding: 18px 16px 18px 19px; gap: 14px; }
  .al-notice--hero .al-notice__icon{ width: 38px; height: 38px; }
  .al-notice .al-notice__actions{ width: 100%; }
  .al-notice .al-notice__btn{ flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce){ .al-notice .al-notice__btn{ transition: none; } }