Modèle:Bandeau/styles.css

/* ================================
   BANDEAUX — Citizen Skin
   Utilise palette --nefald-* + tokens Citizen
   Dark mode automatique via variables
   ================================ */

/* --- Structure --- */

.bandeau {
display: flex;
align-items: center;
gap: 16px;
padding: 16px 20px;
border-radius: 6px;
border-left: 4px solid;
margin: 16px 0;
transition: box-shadow 0.2s ease;
font-size: 0.95em;
line-height: 1.5;
}

.bandeau:hover {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.bandeau-icon {
font-size: 28px;
font-weight: 700;
flex-shrink: 0;
line-height: 1;
background: none !important;
border: none !important;
padding: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}

.bandeau-icon *,
.bandeau-icon span,
.bandeau-icon > span,
.bandeau-icon > span > span,
.bandeau-icon svg,
.bandeau-icon i {
background: none !important;
border: none !important;
padding: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
display: inline !important;
color: inherit !important;
}

.bandeau-content {
flex: 1;
min-width: 0;
}

.bandeau-titre {
font-weight: 700;
font-size: 1.05em;
margin-bottom: 6px;
letter-spacing: 0.01em;
}

.bandeau-texte {
margin: 0;
}

/* ================================
   TYPES — palette --nefald-*
   Dark mode : automatique via Citizen.css
   ================================ */

/* INFO */
.bandeau-info {
background-color: var(--nefald-info-bg);
border-left-color: var(--nefald-info-border);
color:             var(--nefald-info-text);
}

/* ATTENTION / WARNING */
.bandeau-attention,
.bandeau-warning {
background-color: var(--nefald-warning-bg);
border-left-color: var(--nefald-warning-border);
color:             var(--nefald-warning-text);
}

/* ERREUR / ERROR / DANGER */
.bandeau-erreur,
.bandeau-error,
.bandeau-danger {
background-color: var(--nefald-danger-bg);
border-left-color: var(--nefald-danger-border);
color:             var(--nefald-danger-text);
}

/* SUCCÈS */
.bandeau-succes,
.bandeau-success {
background-color: var(--nefald-success-bg);
border-left-color: var(--nefald-success-border);
color:             var(--nefald-success-text);
}

/* NOTE (neutre) */
.bandeau-note {
background-color: var(--nefald-neutral-bg);
border-left-color: var(--nefald-neutral-border);
color:             var(--nefald-neutral-text);
}

/* CONSEIL / TIP (violet) */
.bandeau-conseil,
.bandeau-tip {
background-color: var(--nefald-tip-bg);
border-left-color: var(--nefald-tip-border);
color:             var(--nefald-tip-text);
}

/* CONSTRUCTION (warning, même famille) */
.bandeau-construction {
background-color: var(--nefald-warning-bg);
border-left-color: var(--nefald-warning-border);
color:             var(--nefald-warning-text);
}

/* IMPORTANT (danger, variante accent) */
.bandeau-important {
background-color: var(--nefald-danger-bg);
border-left-color: var(--nefald-danger-border);
color:             var(--nefald-danger-text);
}

/* QUESTION (cyan) */
.bandeau-question {
background-color: var(--nefald-question-bg);
border-left-color: var(--nefald-question-border);
color:             var(--nefald-question-text);
}

/* NOUVEAU / NEW (success, teinte lime) */
.bandeau-nouveau,
.bandeau-new {
background-color: var(--nefald-success-bg);
border-left-color: var(--nefald-success-border);
color:             var(--nefald-success-text);
}

/* ARCHIVE (neutre, warmé) */
.bandeau-archive {
background-color: var(--nefald-neutral-bg);
border-left-color: var(--nefald-neutral-border);
color:             var(--nefald-neutral-text);
}

/* ================================
   RESPONSIVE
   ================================ */

@media (max-width: 600px) {
.bandeau {
gap: 12px;
padding: 14px 16px;
font-size: 0.9em;
}

.bandeau-icon {
font-size: 24px;
}

.bandeau-titre {
font-size: 1em;
}
}