/* ===========================================================================
   .callout — BANDEAU D'INFORMATION / D'AVERTISSEMENT, composant UNIQUE.

   Repris a l'identique de docs/DESIGN_SYSTEM.html (ancre #callout, cf. CLAUDE.md
   §17), qui le decrit depuis longtemps sans qu'il ait jamais ete produit : chaque
   module s'etait fabrique sa propre classe d'alerte (`fic-alert`, `eh-alert`,
   `opd-callout`...). Elles doivent converger ici.

   NE PAS recreer de classe d'alerte par module.

   Quatre tons : (defaut) primary · .info · .warn · .danger
   Variante riche : .ic  (icone + titre + texte)

   Les tokens du design system (--surface, --r, --warning-dark...) n'existent pas
   encore dans les deux applications : chaque var() porte donc son repli. Le jour
   ou les tokens seront poses sur :root, les replis deviendront inertes d'eux-memes.
   =========================================================================== */

.callout{
    border: 1px solid var(--primary-200, rgba(var(--primary-rgb, 16,185,129), .28));
    background: linear-gradient(120deg, var(--primary-50, rgba(var(--primary-rgb, 16,185,129), .08)), var(--surface, #fff));
    padding: 16px 20px;
    border-radius: var(--r, 16px);
    font-size: .9rem;
    color: var(--primary-darker, #065f46);
    margin: 16px 0;
    line-height: 1.5;
}
.callout.warn  { border-color:#fde3ad; background:linear-gradient(120deg,#fff7ea,var(--surface,#fff)); color:var(--warning-dark,#92610a); }
.callout.danger{ border-color:#fbcaca; background:linear-gradient(120deg,#fef1f1,var(--surface,#fff)); color:var(--danger-dark,#991b1b); }
.callout.info  { border-color:#c7dcff; background:linear-gradient(120deg,#eef5ff,var(--surface,#fff)); color:var(--info-dark,#1e40af); }

.callout.ic{ display:flex; align-items:flex-start; gap:15px; padding:18px 20px; border-radius: var(--r-lg, 20px); }
.callout .cal-ic{ font-size:1.35rem; margin-top:1px; flex:0 0 auto; }
.callout .cal-t { flex:1; min-width:0; }
.callout .cal-t strong{ display:block; font-size:.95rem; color:inherit; }
.callout .cal-t p{ margin:4px 0 0; font-size:.86rem; line-height:1.55; color:inherit; opacity:.92; }
.callout .cal-t ul{ margin:6px 0 0; padding-left:18px; font-size:.86rem; line-height:1.55; }
.callout .cal-t li{ margin:2px 0; }

/* Action de reparation. Hauteur tactile >= 44px (§17, qualite non negociable). */
.callout .cal-cta{
    display:inline-flex; align-items:center; min-height:44px; margin-top:12px; padding:0 18px;
    border-radius: var(--r, 14px); background: var(--primary, #10b981); color:#fff;
    font-weight:600; font-size:.88rem; text-decoration:none;
    transition: filter .18s ease, box-shadow .18s ease;
}
.callout .cal-cta:hover{ filter:brightness(1.06); box-shadow:0 6px 16px rgba(var(--primary-rgb, 16,185,129), .28); }
.callout .cal-cta:focus-visible{ outline:2px solid var(--primary, #10b981); outline-offset:3px; }
@media (prefers-reduced-motion: reduce){ .callout .cal-cta{ transition:none; } }