/*-------------------*/
/*-------------------*/
/*BANNER mobile first*/
/*-------------------*/
/*-------------------*/

header{
    /*si votre image de fond a un souci et ne s'affiche pas pour X raison,
    il faut initialiser une couleur de fond par defaut avant d'appeler votre image*/
    background: radial-gradient(circle, var(--ultra-marine) 30%, var(--marine-blue) 100%);
   color: var(--clr-lighter);
   font-size: 2rem;
   padding:0rem 2rem 4rem 2rem;
   text-align: center;
}


.img-double{
    background-image: url(../../img/pop/pop-2026-box.png);
    background-position: 0px 0px;
    background-size: 75%;
    background-repeat: no-repeat;
}

.img-double img{
    padding-left: 8rem;
    -webkit-filter: drop-shadow(5px 5px 5px #222);
    filter: drop-shadow(-8px 0px 12px #00000090);
    min-height: 100%;
}

header h1{
    font-size: 2.22rem;
    color: var(--clr-secondary);
    font-family: 'Archivo Black', sans-serif;
    font-weight: bolder;
    text-shadow: 0px 0px 10px rgba(11,43,45,1);
}

header h2{
    font-size: 1.55rem;
    color: var(--clr-white);
    margin-bottom: 2rem;
}

header h3{
    font-size: 2.5rem;
    color: var(--clr-);
    background-color: var(--clr-primary);
}
header h3 span:first-child{
    display: block;
    width: 100%;
    font-size: 4rem;

    border: 2px solid #ffffff;
    padding:1rem;
    background-color: var(--clr-secondary);
    filter: drop-shadow(-8px 0px 12px #00000090);
    font-weight: bold;
}
header h3 span:nth-child(2){
    padding:1rem;
}
header p{
    text-align: center;
}
header .link{
    font-size: 1rem;
    color: var(--clr-lighter);
    text-decoration: underline;

}



@media (min-width:768px){
    /*je donne une marge en haut de ma banniere pour qu'elle ne soit pas recouverte par la navigation*/
    header{   padding:6rem 1rem;text-align: left;}
    header p{
        text-align: right;
    }
    header h1{
        font-size: 4.22rem;
        color:rgb(141, 182, 255);
    }

    header h3 span:first-child{
        display:initial;
        width:initial;
        font-size: 2.5rem;
    }

}