h1,h2{font-family: 'Anton', sans-serif;letter-spacing: 3px;}
h3{font-family: 'Caveat', cursive;font-weight: 200;}
h4{font-family: 'Roboto', sans-serif;letter-spacing: 2px;}

body, a, p {
    font-family: 'Roboto', sans-serif;
    font-size: clamp(0.9rem, 2vw, 1.1rem);
    color: var(--gris-fonce);
}
span{
    margin:auto;
    padding:0;
}
img{
    display:flex;
}
header{
    background-color: transparent;
    background-image: url(../imgs/arenes-roland-portalier-parentis.webp);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height:100vh;    
}
main, footer{
    width:100%;
    display: grid;
    background-color: transparent;
    grid-template-columns: 1fr;
    justify-items: center;   
}
footer{
    background-color: var(--jaune);
}
section{
    width:100%;
    margin:auto;
    display: grid;
    align-items: center;
    align-content: center;
    justify-content: center;
}
.main-section1{ /* CLEE */
    align-items: center;
    justify-items: stretch;
    padding: 0 5vw;
    grid-template-columns: 1fr min-content;
    background-color: var(--bleu-clair);
    img{height:100%;max-height:120px; max-width: 40vw;}
    h4{
        color:var(--blanc);
        font-size: 1.2rem;
        span{font-size: 1.4rem;color:var(--bleu-fonce); }
        @media(min-width:481px){font-size: 1.4rem;span{font-size: 1.6rem;} }
        @media(min-width:769px){font-size: 1.6rem;span{font-size: 1.8rem;} }
        @media(min-width:1024px){font-size: 1.8rem;span{font-size: 2rem;} }
        @media(min-width:1280px){font-size: 2rem;span{font-size: 2.2rem;} }
    }
}
.main-section2{/* affiches + chiffres */
    grid-template-columns: 1fr;
    background-color: var(--blanc);
    padding:0;
    padding-top: 1rem;
    img{width:100%;}
    @media(min-width:769px){
        grid-template-columns: 1fr 2fr;
        .secteurs{grid-column: span 2;}
    }
}
.affiche, .objectifs, .eleves, .secteurs, .citation, .partenaires{
    display:grid;
    width:100%;
    padding: 2rem;
    grid-template-columns: 1fr;
    p{
        span:first-of-type{
            margin:10px;
            font-family: 'Caveat', cursive;
            font-size: 1.22rem;
            @media(min-width:481px){font-size: 1.24rem;}
            @media(min-width:769px){font-size: 1.26rem;}
            @media(min-width:1024px){font-size: 1.28rem;}
            @media(min-width:1280px){font-size: 1.3rem;}
        }
        span{color:var(--noir);}
    }
}
.affiche{
    align-self: start;
    padding:5px;
    img{
        width:100%;
        margin:auto;
    }
    @media(min-width:769px){grid-row: span 3;}
    border-radius:5px;
    background-color: var(--bleu-fonce);
    
}
.objectifs, .eleves, .secteurs {
    h3{
        font-size: 2.4rem;
        @media(min-width:481px){font-size: 2.5rem;}
        @media(min-width:769px){font-size: 2.6rem;}
        @media(min-width:1024px){font-size: 2.8rem;}
        @media(min-width:1280px){font-size: 3rem;}
    }
}
.objectifs{
    h3{color:var(--vert-clair);}
    p{span:first-of-type{color:var(--vert-clair);}}
}
.eleves{
    h3{color:var(--bleu-clair);}
    p{span:first-of-type{color:var(--bleu-clair);}}
    a:hover{color:var(--bleu-clair);}
}
.secteurs{
    h3{color:var(--orange);grid-column: span 2;}
    margin: auto;
    grid-auto-flow: row dense;
    align-content: center;
    justify-content: center;
    fieldset{border:2px solid;padding: 10px;border-radius: 5px;}
    legend{padding : 10px;border-radius: 5px;}
    gap: 1rem;
    grid-template-columns: repeat(2, 1fr);
    @media(min-width:769px){grid-template-columns: repeat(3, 1fr);h3{grid-column: span 3;}}
    @media(min-width:1280px){grid-template-columns: repeat(4, 1fr);h3{grid-column: span 4;}}
}

.main-section3{ /*citation*/
    grid-template-columns: 1fr;
    padding:1rem 0;
    background-color: var(--bleu-clair);
}
.citation{
    width: 90%;
    max-width: 1200px;
    margin:auto;
    gap:0.5rem;
    grid-template-columns: 26px 1fr 26px;
    @media(min-width:481px){grid-template-columns: 28px 1fr 28px;}
    @media(min-width:769px){grid-template-columns: 32px 1fr 32px;}
    @media(min-width:1024px){grid-template-columns: 36px 1fr 36px;}
    @media(min-width:1280px){grid-template-columns: 40px 1fr 40px;}
    color:var(--blanc);
    svg{fill:var(--blanc);}
    .quote {width:100%;}    
    .quote-left{align-self: start;}
    .quote-right{align-self: end;}
    justify-items: stretch;
    h3{
        align-self: end;
        font-size: 2rem;
        @media(min-width:481px){font-size: 2.2rem;}
        @media(min-width:769px){font-size: 2.4rem;}
        @media(min-width:1024px){font-size: 2.6rem;}
        @media(min-width:1280px){font-size: 3rem;}
    }
    h4{
        justify-self: end;
        align-self: start;
        font-size: 1.1rem;
        @media(min-width:481px){font-size: 1.2rem;}
        @media(min-width:769px){font-size: 1.4rem;}
        @media(min-width:1024px){font-size: 1.6rem;}
        @media(min-width:1280px){font-size: 1.8rem;}
    }
}
.main-section4{
    grid-template-columns: 1fr;
    padding:0;
    background-image: url(../imgs/arenes-interieur.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    img{width:100%;height:70px;}
}
.partenaires{
    grid-template-columns: repeat(2, 1fr);
    @media(min-width:769px){grid-template-columns: repeat(3, 1fr);}
    @media(min-width:1024px){grid-template-columns: repeat(5, 1fr);}
    @media(min-width:1280px){grid-template-columns: repeat(7, 1fr);}
    max-width: 1200px;
    grid-auto-flow: row dense;
    align-content: center;
    justify-content: center;
    margin:20px auto;
    padding:1rem;
    gap: 1rem;
    a, h4 {
        display: flex;
        align-items: center;
        justify-items: center;
        border-radius: 5px;
        outline: 1px solid transparent;
        transition-duration: 150ms;
        transition-timing-function: linear;
        transition-property: outline-color, opacity;
        background-color:var(--blanc);
        opacity:0.9;
        cursor:pointer;
    }
    a:hover, a:active, a:focus, h4:hover {outline: 1px solid var(--orange);opacity:1;}
    .big{grid-column: span 2;grid-row: span 2;}
    .paysage{grid-column: span 2;}
    img {
        border-radius: 5px;
        margin:auto;
        height:80%;
        width:80%;
        object-fit: contain;
    }
    h4{        
        color:var(--bleu-fonce);
        padding:0.5rem;
        font-size: 1.2rem;
        @media(min-width:481px){font-size: 1.4rem;}
        @media(min-width:769px){font-size: 1.6rem;}
        @media(min-width:1024px){font-size: 1.8rem;}
        @media(min-width:1280px){font-size: 2rem;}
        grid-column: span 2;
        @media(min-width:1024px){grid-column: span 3;}
        @media(min-width:1280px){grid-column: span 5;}
    }
}
.footer-clee{
    max-width: 1200px;
    grid-auto-flow: row dense;
    align-content: center;
    justify-content: center;
    margin:20px auto;
    padding:1rem;
    gap: 0.5rem;
    grid-template-columns: repeat(2, 1fr);
    @media(min-width:769px){grid-template-columns: repeat(3, 1fr);}
    @media(min-width:1024px){grid-template-columns: repeat(4, 1fr);}
    @media(min-width:1280px){grid-template-columns: repeat(5, 1fr);}
    img{width:100%;max-width: 160px;}
    a, p{
        font-size: 0.8rem;
        @media(min-width:481px){font-size: 0.85rem;}
        @media(min-width:769px){font-size: 0.90rem;}
        @media(min-width:1024px){font-size: 0.95rem;}
        @media(min-width:1280px){font-size: 1rem;}
        line-height: 1.2;
        color:var(--noir);
        margin:0;
        text-align: justify;
    }
    h3{
        color:var(--noir);
        font-size: 1.6rem;
        @media(min-width:481px){font-size: 1.65rem;}
        @media(min-width:769px){font-size: 1.7rem;}
        @media(min-width:1024px){font-size: 1.75rem;}
        @media(min-width:1280px){font-size: 1.8rem;}      
    }
    .phone, .mail, .courrier{display:inline-flex;width:12px;margin-right:5px;}
}