Hiob le 2 mars 2026 à 20:44

2026-03-02T20:44:09Z

Hiob : icone centrée et agrandie

2025-10-28T07:55:00Z

icone centrée et agrandie

← Version précédente		Version du 28 octobre 2025 à 07:55
Ligne 5 :		Ligne 5 :
	.bandeau {		.bandeau {
	display: flex;		display: flex;
	align-items: ~~flex-start~~;		align-items: center; /* Centrage vertical */
	gap: ~~12px~~;		gap: 16px;
	padding: ~~14px~~ 16px;		padding: 16px 20px;
	border-radius: 6px;		border-radius: 6px;
	border-left: 4px solid;		border-left: 4px solid;
Ligne 21 :		Ligne 21 :

	.bandeau-icon {		.bandeau-icon {
	font-size: ~~20px~~;		font-size: 28px; /* Icône plus grande */
	font-weight: 700;		font-weight: 700;
	flex-shrink: 0;		flex-shrink: 0;
	line-height: 1~~.4;~~		line-height: 1;
	~~margin-top: 0~~;
	/* Supprimer TOUT style de boîte */		/* Supprimer TOUT style de boîte */
	background: none !important;		background: none !important;
Ligne 231 :		Ligne 230 :
	@media (max-width: 600px) {		@media (max-width: 600px) {
	.bandeau {		.bandeau {
	gap: ~~10px~~;		gap: 12px;
	padding: ~~12px~~ 14px;		padding: 14px 16px;
	font-size: 0.9em;		font-size: 0.9em;
	}		}

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

Hiob le 28 octobre 2025 à 07:48

2025-10-28T07:48:53Z

Voir les modifications

Hiob le 28 octobre 2025 à 07:46

2025-10-28T07:46:40Z

Voir les modifications

Hiob : Création

2025-10-28T07:28:19Z

Création

Nouvelle page

/* ================================
BANDEAUX - Citizen Skin + FontAwesome
================================ */

.bandeau {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 16px 20px;
margin: 16px 0;
border-radius: 8px;
border-left: 4px solid;
font-size: 0.95rem;
line-height: 1.6;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.2s ease;
}

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

.bandeau-icon {
font-size: 22px;
flex-shrink: 0;
line-height: 1;
margin-top: 2px;
opacity: 0.9;
}

.bandeau-icon i {
display: block;
}

.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 DE BANDEAUX
================================ */

/* INFO (bleu) */
.bandeau-info {
background-color: #e3f2fd;
border-left-color: #1976d2;
color: #0d47a1;
}

.bandeau-info .bandeau-icon {
color: #1976d2;
}

[data-theme="dark"] .bandeau-info {
background-color: #0a1929;
color: #90caf9;
border-left-color: #42a5f5;
}

[data-theme="dark"] .bandeau-info .bandeau-icon {
color: #64b5f6;
}

/* ATTENTION / WARNING (orange) */
.bandeau-attention,
.bandeau-warning {
background-color: #fff3e0;
border-left-color: #f57c00;
color: #e65100;
}

.bandeau-attention .bandeau-icon,
.bandeau-warning .bandeau-icon {
color: #f57c00;
}

[data-theme="dark"] .bandeau-attention,
[data-theme="dark"] .bandeau-warning {
background-color: #1a0f00;
color: #ffb74d;
border-left-color: #ff9800;
}

[data-theme="dark"] .bandeau-attention .bandeau-icon,
[data-theme="dark"] .bandeau-warning .bandeau-icon {
color: #ffa726;
}

/* ERREUR / DANGER (rouge) */
.bandeau-erreur,
.bandeau-error,
.bandeau-danger {
background-color: #ffebee;
border-left-color: #d32f2f;
color: #b71c1c;
}

.bandeau-erreur .bandeau-icon,
.bandeau-error .bandeau-icon,
.bandeau-danger .bandeau-icon {
color: #d32f2f;
}

[data-theme="dark"] .bandeau-erreur,
[data-theme="dark"] .bandeau-error,
[data-theme="dark"] .bandeau-danger {
background-color: #1a0000;
color: #ef5350;
border-left-color: #e53935;
}

[data-theme="dark"] .bandeau-erreur .bandeau-icon,
[data-theme="dark"] .bandeau-error .bandeau-icon,
[data-theme="dark"] .bandeau-danger .bandeau-icon {
color: #ef5350;
}

/* SUCCÈS (vert) */
.bandeau-succes,
.bandeau-success {
background-color: #e8f5e9;
border-left-color: #388e3c;
color: #1b5e20;
}

.bandeau-succes .bandeau-icon,
.bandeau-success .bandeau-icon {
color: #388e3c;
}

[data-theme="dark"] .bandeau-succes,
[data-theme="dark"] .bandeau-success {
background-color: #0a1a0a;
color: #66bb6a;
border-left-color: #4caf50;
}

[data-theme="dark"] .bandeau-succes .bandeau-icon,
[data-theme="dark"] .bandeau-success .bandeau-icon {
color: #66bb6a;
}

/* NOTE (gris) */
.bandeau-note {
background-color: #f5f5f5;
border-left-color: #616161;
color: #212121;
}

.bandeau-note .bandeau-icon {
color: #616161;
}

[data-theme="dark"] .bandeau-note {
background-color: #1a1a1a;
color: #e0e0e0;
border-left-color: #9e9e9e;
}

[data-theme="dark"] .bandeau-note .bandeau-icon {
color: #bdbdbd;
}

/* CONSEIL / TIP (violet) */
.bandeau-conseil,
.bandeau-tip {
background-color: #f3e5f5;
border-left-color: #7b1fa2;
color: #4a148c;
}

.bandeau-conseil .bandeau-icon,
.bandeau-tip .bandeau-icon {
color: #7b1fa2;
}

[data-theme="dark"] .bandeau-conseil,
[data-theme="dark"] .bandeau-tip {
background-color: #1a0a1f;
color: #ba68c8;
border-left-color: #9c27b0;
}

[data-theme="dark"] .bandeau-conseil .bandeau-icon,
[data-theme="dark"] .bandeau-tip .bandeau-icon {
color: #ba68c8;
}

/* CONSTRUCTION (jaune-brun) */
.bandeau-construction {
background-color: #fff8e1;
border-left-color: #f57f17;
color: #f57f17;
}

.bandeau-construction .bandeau-icon {
color: #f57f17;
}

[data-theme="dark"] .bandeau-construction {
background-color: #1f1a00;
color: #ffd54f;
border-left-color: #ffb300;
}

[data-theme="dark"] .bandeau-construction .bandeau-icon {
color: #ffd54f;
}

/* IMPORTANT (rouge-orange) */
.bandeau-important {
background-color: #fff3e0;
border-left-color: #ff6f00;
color: #e65100;
}

.bandeau-important .bandeau-icon {
color: #ff6f00;
}

[data-theme="dark"] .bandeau-important {
background-color: #1f1100;
color: #ffb74d;
border-left-color: #ff9800;
}

[data-theme="dark"] .bandeau-important .bandeau-icon {
color: #ffa726;
}

/* QUESTION (bleu clair) */
.bandeau-question {
background-color: #e1f5fe;
border-left-color: #0288d1;
color: #01579b;
}

.bandeau-question .bandeau-icon {
color: #0288d1;
}

[data-theme="dark"] .bandeau-question {
background-color: #001f2f;
color: #81d4fa;
border-left-color: #29b6f6;
}

[data-theme="dark"] .bandeau-question .bandeau-icon {
color: #4fc3f7;
}

/* NOUVEAU (cyan) */
.bandeau-nouveau,
.bandeau-new {
background-color: #e0f7fa;
border-left-color: #00acc1;
color: #006064;
}

.bandeau-nouveau .bandeau-icon,
.bandeau-new .bandeau-icon {
color: #00acc1;
}

[data-theme="dark"] .bandeau-nouveau,
[data-theme="dark"] .bandeau-new {
background-color: #001f1f;
color: #80deea;
border-left-color: #26c6da;
}

[data-theme="dark"] .bandeau-nouveau .bandeau-icon,
[data-theme="dark"] .bandeau-new .bandeau-icon {
color: #4dd0e1;
}

/* ARCHIVE (marron) */
.bandeau-archive {
background-color: #efebe9;
border-left-color: #6d4c41;
color: #3e2723;
}

.bandeau-archive .bandeau-icon {
color: #6d4c41;
}

[data-theme="dark"] .bandeau-archive {
background-color: #1a1311;
color: #bcaaa4;
border-left-color: #8d6e63;
}

[data-theme="dark"] .bandeau-archive .bandeau-icon {
color: #a1887f;
}

/* ================================
RESPONSIVE
================================ */
@media (max-width: 768px) {
.bandeau {
padding: 14px 16px;
gap: 12px;
}

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

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

/* ================================
ACCESSIBILITÉ
================================ */
@media (prefers-reduced-motion: reduce) {
.bandeau {
transition: none;
}
}

Modèle:Bandeau/styles.css - Historique des versions

Hiob le 2 mars 2026 à 20:44

Hiob : icone centrée et agrandie

Hiob le 28 octobre 2025 à 07:48

Hiob le 28 octobre 2025 à 07:46

Hiob : Création

Hiob : icone centrée et agrandie

Hiob : Création