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; Jaune Pale */
        color: #247205;
        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;
    
}

.bandeau-paques {
    --angle: 60deg;
    --c1: #ffef9f;
    --c2: #c1fba4;
    --c3: #ffd6e0;
    --c4: #90f1ef;
    --c5: #7bf1a8;

    background: linear-gradient(
        var(--angle),
        var(--c1) 0%,
        var(--c1) 18%,
        var(--c2) 22%,
        var(--c2) 38%,
        var(--c3) 42%,
        var(--c3) 58%,
        var(--c4) 62%,
        var(--c4) 78%,
        var(--c5) 82%,
        var(--c5) 100%

    );

    color: rgb(8, 4, 4);
    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-mer {
    position: relative;
    overflow: hidden;

    padding: 0px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items:flex-start;

    /* color: #0c4663; */
    color:#fff;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.6;

    min-height: 250px;
    text-shadow:
    0 2px 4px rgba(0,0,0,.65),
    0 0 12px rgba(0,0,0,.35);

    /* background: linear-gradient(
        to bottom,
        #87dfff 0%,
        #c9f4ff 55%,
        #e8fbff 100%
    ); */
}

.summer-message{
    position:relative;
    z-index:10;
    margin-top:0px;

    max-width:900px;

    padding:9px 15px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.22),
            rgba(255,255,255,.08)
        );

    backdrop-filter:blur(8px);

    border:1px solid rgba(255,255,255,.25);

    border-radius:18px;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.35),
        inset 0 -1px 0 rgba(255,255,255,.08),
        0 12px 30px rgba(0,0,0,.18);

    color:white;
    font-size:18px;

    text-align:center;

    text-shadow:
        0 2px 5px rgba(0,0,0,.7);
}


.background-perso {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
}

/* .background-perso::after{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.18);
} */

.sky {
  position: absolute;
  top: 0;
  height:40%;
  width:100%;
  background: linear-gradient(to bottom, #037ccb 0%, #82ccef 100%);
}

.sea {
  position: absolute;
  height:30%;
  width:200%;
  left:-50%;
  top:40%;
  border-radius:0 0 50% 50%;
  background: linear-gradient(to bottom, rgba(8,122,193,1) 0%, rgba(18,156,192,1) 25%, rgba(42,212,229,1) 50%, rgba(150,233,239,1) 75%, rgba(222,236,211,1) 100%);
  animation: waveanim ease-in-out 10s;
  animation-iteration-count: infinite;
  transform-origin: 50% 0%;
  overflow:hidden;
}

.seafoam {
  width:100%;
  height:100%;
  background: linear-gradient(to bottom, transparent 0%, transparent 90%, white 100%);
  animation: seafoamanim ease-in-out 10s;
  animation-iteration-count: infinite;
}

.sand {
  position: absolute;
  height:35%;
  width:100%;
  background: #fdf1d7;
  top:65%;
}

.sand-front {
  position: absolute;
  height:10%;
  width:100%;
  background: #fdf1d7;
  top:90%;
}

.wet-sand {
  position: absolute;
  height:37.5%;
  width:200%;
  left:-50%;
  top:40%;
  border-radius:0 0 50% 50%;
  background: #ecc075;
  box-shadow: 0 10px 10px 0 #ecc075;
  animation: wetsandanim ease-in-out 10s;
  animation-iteration-count: infinite;
}


@keyframes waveanim{
  0% {    transform:  scaleY(1.00) ;  }
  35% {    transform:  scaleY(1.3) ;  }
  69% {    transform:  scaleY(1.00) ;  }
  100% {    transform:  scaleY(1.00) ;  }
}

@keyframes wetsandanim{
  0% {  opacity:0.2; }
  34% { opacity:0.2; }
  35% { opacity:0.7;}
  100% {opacity:0.2; }
}


@keyframes seafoamanim{
  0% {  opacity:0; }
  30% { opacity:1; }
  50% { opacity:0; }
  100% {opacity:0; }
}

@keyframes flamingoWave {
    0% { transform: rotateY(180deg) translateX(0) translateY(0) rotate(0deg); }
    35% { transform: rotateY(180deg) translateX(3px) translateY(8px) rotate(1.2deg); }
    69% { transform: rotateY(180deg) translateX(-2px) translateY(0) rotate(-0.8deg); }
    100% { transform: rotateY(180deg) translateX(0) translateY(0) rotate(0deg); }
}

@keyframes crabeRunning {
    0% { transform: rotateY(180deg) translateX(0) rotate(0deg); }
    5% { transform: rotateY(180deg) translateX(15px) rotate(3deg); }
    10% { transform: rotateY(180deg) translateX(30px) rotate(-3deg); }
    15% { transform: rotateY(180deg) translateX(45px) rotate(3deg); }
    20% { transform: rotateY(180deg) translateX(60px) rotate(-3deg); }
    25% { transform: rotateY(180deg) translateX(75px) rotate(3deg); }
    30% { transform: rotateY(180deg) translateX(90px) rotate(-3deg); }
    35% { transform: rotateY(180deg) translateX(90px) rotate(3deg); }
    40% { transform: rotateY(180deg) translateX(90px) rotate(-3deg); }
    45% { transform: rotateY(180deg) translateX(75px) rotate(3deg); }
    50% { transform: rotateY(180deg) translateX(60px) rotate(-3deg); }
    55% { transform: rotateY(180deg) translateX(45px) rotate(3deg); }
    60% { transform: rotateY(180deg) translateX(30px) rotate(-3deg); }
    65% { transform: rotateY(180deg) translateX(15px) rotate(3deg); }
    70% { transform: rotateY(180deg) translateX(1px) translateY(0px) rotate(1deg); }
    75% { transform: rotateY(180deg) translateX(0px) translateY(1px) rotate(2deg); }
    80% { transform: rotateY(180deg) translateX(1px) translateY(2px) rotate(-1deg); }
    85% { transform: rotateY(180deg) translateX(1px) translateY(0px) rotate(0deg); }
    90% { transform: rotateY(180deg) translateX(-1px) translateY(1px) rotate(-2deg); }
    95% { transform: rotateY(180deg) translateX(0px) translateY(0px) rotate(0deg); }
}


.easter-text {
    font-size: 18px;
    color: #333;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
    margin-top: 10px;
    position: relative;
    z-index: 100;
    text-align: center;
    border: 0px solid transparent;
    border-radius: 10px;
    backdrop-filter: blur(1px) hue-rotate(10deg) brightness(1.05);
    
}

.easter_egg {
    position: absolute;
    width: 50px;
    height: 50px;
    z-index: 1;

    opacity: 1;
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
    filter: drop-shadow(0 0 3px rgba(0,0,0,0.3));
}

.easter_egg.e1 {top: 8%; left: 4%; transform: rotate(0deg); background-image: url('/img/paques/lapin.png');}
.easter_egg.e2 {top: 30%; left: 68%; transform: rotate(12deg); background-image: url('/img/paques/panier.png');}
.easter_egg.e3 {top: 65%; left: 26%;  transform: rotate(-10deg); background-image: url('/img/paques/oeuf1.png');}
.easter_egg.e4 {top: 12%; left: 90%; transform: rotate(25deg); background-image: url('/img/paques/oeuf2.png');}
.easter_egg.e5 {top: 10%; left: 40%;  transform: rotate(13deg); background-image: url('/img/paques/oeuf3.png');}
.easter_egg.e6 {top: 40%; left: 50%; transform: rotate(0deg); background-image: url('/img/paques/oeuf4.png');}
.easter_egg.e7 {top: 70%; left: 50%;  transform: rotate(0deg); background-image: url('/img/paques/oeuf5.png');}
/* 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'); }

.summer_item {
    position: absolute;
    width: 50px;
    height: 50px;
    z-index: 1;

    opacity: 1;
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
    filter: drop-shadow(0 0 3px rgba(0,0,0,0.3));
}

.summer_item.s1 {top: 70%; left: 92%; z-index:11; transform: rotateY(180deg);  background-image: url('/img/summer_item/crab.png'); animation: crabeRunning 10s linear infinite;}
.summer_item.s2 {top: 40%; left: -1%;  z-index:11; transform: rotateY(180deg);  background-image: url('/img/summer_item/flamingo.png'); animation: flamingoWave ease-in-out 10s infinite;}
.summer_item.s3 {top: 80%; left: 70%;  z-index:11; transform: rotate(30deg);  background-image: url('/img/summer_item/hawaiian-shirt.png');}
.summer_item.s4 {top: 70%; left: 4%;  z-index:11; transform: rotate(20deg);  background-image: url('/img/summer_item/ice-cream.png');}
.summer_item.s5 {top: 75%; left: 30%;  z-index:11; transform: rotate(-20deg);  background-image: url('/img/summer_item/lemonade.png');}
.summer_item.s6 {top: 15%; left: 10%;  z-index:11; transform: rotate(20deg);  background-image: url('/img/summer_item/birds.png');}
.summer_item.s7 {top: 0%; left: 92%;  z-index:11; transform: rotateY(180deg);  background-image: url('/img/summer_item/seagull.png');}
.summer_item.s8 {top: 77%; left: 53%;  z-index:11; transform: rotateY(180deg);  background-image: url('/img/summer_item/ping_pong_1.png');}
.summer_item.s9 {top: 80%; left: 60%;  z-index:11; transform: rotateY(180deg);  background-image: url('/img/summer_item/ping_pong_2.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);
    }

    .blink--black {
    color: #010508;
    font-weight: bold;
    animation: neonBlink 1.2s infinite;
    text-shadow:
        0 0 2px rgba(17, 24, 66, 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;
    }

    .summer-text {
    color: #fff9d1;
    font-weight: 800;

    text-shadow:
        0 0 5px rgba(255, 230, 120, 0.7),
        0 0 10px rgba(255, 215, 80, 0.5),
        1px 1px 2px rgba(0,0,0,0.25);

    animation: summerGlow 2.5s ease-in-out infinite;
}

@keyframes summerGlow {
    0%, 100% {
        color: #fff9d1;
        text-shadow:
            0 0 5px rgba(255,230,120,.7),
            0 0 10px rgba(255,215,80,.5),
            1px 1px 2px rgba(0,0,0,.25);
    }

    50% {
        color: #ffffff;
        text-shadow:
            0 0 8px rgba(255,240,150,.9),
            0 0 18px rgba(255,220,90,.8),
            0 0 30px rgba(255,200,40,.4),
            1px 1px 2px rgba(0,0,0,.25);
    }
}

.summer-alert {
    display: inline-block;

    padding: 2px 10px;
    margin-right: 4px;

    background: linear-gradient(
        to bottom,
        #ffdb6e,
        #ffb938
    );

    color: #7a3e00;
    font-weight: 800;

    border-radius: 999px;

    box-shadow:
        0 2px 6px rgba(0,0,0,.15),
        inset 0 1px 0 rgba(255,255,255,.5);
}

.summer-alert2 {
    display: inline-block;

    color: white;
    font-weight: 800;
    letter-spacing: 0.5px;

    background: linear-gradient(
        135deg,
        #ff7b54,
        #ff5f45
    );

    padding: 4px 12px;

    border-radius: 6px;

    box-shadow:
        0 2px 6px rgba(0,0,0,.15);

    text-transform: uppercase;
}

.summer-alert3 {
    color: #d94f2b;
    font-weight: 800;

    padding: 2px 10px;

    border: 3px solid #ff6b42;
    border-radius: 30px;

    background:
        linear-gradient(
            to right,
            white 0%,
            white 20%,
            #ff6b42 20%,
            #ff6b42 30%,
            white 30%,
            white 70%,
            #ff6b42 70%,
            #ff6b42 80%,
            white 80%
        );

    box-shadow:
        0 2px 4px rgba(0,0,0,.12);
}

.summer-alert4 {
    color: #ff9d00;
    font-weight: 900;

    text-shadow:
        0 0 8px rgba(255, 196, 0, .45),
        0 0 16px rgba(255, 220, 120, .35);
}

.summer-alert5 {
    display: inline-block;

    position: relative;

    background: #00a6c7;
    color: white;

    padding: 4px 14px;

    font-weight: 700;

    border-radius: 4px;
}

.summer-alert5::before,
.summer-alert5::after {
    content: "";

    position: absolute;
    top: 50%;

    width: 0;
    height: 0;

    transform: translateY(-50%);
}

.summer-alert5::before {
    left: -10px;

    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 10px solid #00a6c7;
}

.summer-alert5::after {
    right: -10px;

    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid #00a6c7;
}