body {
        margin: 0;
        font-family: Arial, Helvetica, sans-serif;
    }

    /* ----- BANDEAU PRINCIPAL ROUGE ----- */
    .bandeau {
    --angle: 180deg;
    --c1: #000;
    --c2: #000;
    --c3: #000;

    background: linear-gradient(
        var(--angle),
        var(--c1) 0%,
        var(--c2) 40%,
        var(--c3) 100%
    );

    color: white;
    padding: 22px 25px;
    font-size: 20px;
    font-weight: bold;
    line-height: 1.45;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    border-bottom: 3px solid rgba(0, 0, 0, 0.25);
    position: relative;
    text-align: center;
}

.bandeau::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 45%;
    background: linear-gradient(
        180deg,
        rgba(255,255,255,0.35),
        rgba(255,255,255,0)
    );
}

.bandeau small {
        display: block;
        margin-top: 8px;
        font-size: 17px;
        font-weight: bold;
        color: #ffe46b;
        text-shadow: 0 1px 1px rgba(0,0,0,0.4);
    }

.bandeau--rouge {
    --c1: #d40000;
    --c2: #b10000;
    --c3: #8b0000;
}

.bandeau--bleu {
    --angle: 165deg;
    --c1: #005cd4;
    --c2: #0047b1;
    --c3: #003c8b;
}
.bandeau--bleu2 {
    --angle: 165deg;
    --c1: #0a5fd8;
    --c2: #084cb5;
    --c3: #063a8f;
    
}
    

	/* Flocons statiques */
	.flake {
		position: absolute;
		width: 50px;
		height: 50px;
		opacity: 0.28;
		background-size: contain;
		background-repeat: no-repeat;
		pointer-events: none;
		filter: drop-shadow(0 0 3px rgba(0,0,0,0.3));
	}

	.flake.f1  { top: 10%; left: 4%;  transform: rotate(20deg);  background-image: url('/img/snowflake/flake1.png'); }
	.flake.f2  { top: 35%; left: 12%; transform: rotate(-15deg); background-image: url('/img/snowflake/flake2.png'); }
	.flake.f3  { top: 70%; left: 8%;  transform: rotate(33deg);  background-image: url('/img/snowflake/flake3.png'); }
	.flake.f4  { top: 15%; left: 40%; transform: rotate(-40deg); background-image: url('/img/snowflake/flake4.png'); }
	.flake.f5  { top: 60%; left: 32%; transform: rotate(12deg);  background-image: url('/img/snowflake/flake5.png'); }
	.flake.f6  { top: 82%; left: 45%; transform: rotate(-28deg); background-image: url('/img/snowflake/flake6.png'); }
	.flake.f7  { top: 5%;  right: 12%; transform: rotate(8deg);   background-image: url('/img/snowflake/flake7.png'); }
	.flake.f8  { top: 42%; right: 5%;  transform: rotate(-22deg); background-image: url('/img/snowflake/flake2.png'); }
	.flake.f9  { top: 78%; right: 15%; transform: rotate(30deg);  background-image: url('/img/snowflake/flake4.png'); }
	.flake.f10 { top: 25%; left: 70%; transform: rotate(-10deg); background-image: url('/img/snowflake/flake3.png'); }
	.flake.f11 { top: 55%; left: 80%; transform: rotate(27deg);  background-image: url('/img/snowflake/flake6.png'); }
	.flake.f12 { top: 12%; left: 55%; transform: rotate(-35deg); background-image: url('/img/snowflake/flake1.png'); }
	.flake.f13 { top: 88%; left: 60%; transform: rotate(15deg);  background-image: url('/img/snowflake/flake5.png'); }
	.flake.f14 { top: 48%; left: 90%; transform: rotate(-5deg);  background-image: url('/img/snowflake/flake7.png'); }
	.flake.f15 { top: 68%; left: 50%; transform: rotate(40deg);  background-image: url('/img/snowflake/flake2.png'); }

    
    /* ----- BANDEAU AVEC CLIGNOTEMENT ----- */
    .bandeau-cligno {
        background: linear-gradient(to right, #b40000, #8a0000);
        color: white;
        padding: 20px;
        font-size: 18px;
        line-height: 1.4;
        position: relative;
    }

    /* élément clignotant */
    .blink2 {
    color: #ffea4c;
    font-weight: bold;
    /* animation: clignote 1s infinite; */
    text-shadow:
        0 0 6px rgba(255, 234, 76, 0.8),
        0 0 12px rgba(255, 200, 50, 0.6),
        0 0 18px rgba(255, 160, 0, 0.4);
    }

    .blink3 {
        color: #fff1a8;
        font-weight: bold;
        text-shadow:
            0 0 2px rgba(255, 241, 168, 0.9),
            0 0 6px rgba(255, 214, 90, 0.8),
            0 0 12px rgba(255, 180, 40, 0.6),
            0 0 18px rgba(255, 140, 0, 0.4);
    }

    .blink {
    color: #f5faff;
    font-weight: bold;
    animation: neonBlink 1.2s infinite;
    text-shadow:
        0 0 2px rgba(245, 250, 255, 0.9),
        0 0 6px rgba(180, 220, 255, 0.7),
        0 0 12px rgba(120, 190, 255, 0.5),
        0 0 18px rgba(80, 160, 255, 0.4);
    }

    .neon-fete {
        color: #fff7d6; /* blanc chaud */
        font-weight: bold;
        animation: neonFete 1.8s infinite;
    }

    @keyframes clignote {
        0%, 80% {
            opacity: 1;
        }
        81%, 100% {
            opacity: 0.7;
        }
    }

    @keyframes neonFete {
        5%, 75% {
            text-shadow:
                /* 0 0 2px rgba(255, 247, 214, 0.9), */
                0 0 2px rgb(0, 0, 0),
                0 0 6px rgba(255, 220, 140, 0.6),
                0 0 12px rgba(255, 190, 90, 0.4),
                0 0 18px rgba(255, 150, 70, 0.3);
            opacity: 1;
        }
        90%, 100% {
            text-shadow: none;
            opacity: 0.8;
        }
    }

    @keyframes neonBlink {
        0%, 75% {
            opacity: 1;
            text-shadow:
            0 0 2px rgba(245, 250, 255, 0.9),
            0 0 6px rgba(180, 220, 255, 0.7),
            0 0 12px rgba(120, 190, 255, 0.5),
            0 0 18px rgba(80, 160, 255, 0.4);
        }
        80%, 100% {
            opacity: 0.6;
            text-shadow: none;
        }
    }

    /* Petit panneau attention (optionnel) */
    .panneau {
        position: absolute;
        top: 10px;
        right: 20px;
        font-size: 45px;
    }