/* Police Luciole */

@font-face {
    font-family: "Luciole";
    src: url("font/Luciole-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "Luciole";
    src: url("font/Luciole-Bold.ttf") format("truetype");
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: "Luciole";
    src: url("font/Luciole-Regular-Italic.ttf") format("truetype");
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: "Luciole";
    src: url("font/Luciole-Bold-Italic.ttf") format("truetype");
    font-weight: bold;
    font-style: italic;
}

body{
    margin:0;
    font-family:"Luciole", sans-serif;
    color:white;
    min-height:100vh;
    display:flex;
    flex-direction:column;
}

main{
    flex:1;
    display:flex;
    flex-direction:column;
}

/* SECTION INTRO */

.intro{

    background-color:#e60000;
    background-image:url("../img/intro.svg");
    background-size:cover;
    background-position:center;

    padding:60px 20px;
}

.intro-content{
    max-width:1200px;
    margin:auto;
    text-align:right;
}

.logo{
    width:clamp(525px, 18vw, 1200px);
    height:auto;
    margin-left:auto;
    margin-bottom:20px;
    display:block;
}

.intro-text{
    max-width:500px;
    margin-left:auto;
}


/* SECTION 3 COLONNES */

.three-columns{
    display:flex;
    flex-wrap:wrap;
}

.col{
    flex:1 1 33.333%;
    padding:30px;
    box-sizing:border-box;
}


/* Couleurs fallback + images */

.educpop{
    background-color:#f5c400;
    background-image:url("../img/educpop.svg");
    background-size:cover;
    background-position:center;
}

.solid{
    background-color:#24e600;
    background-image:url("../img/solid.svg");
    background-size:cover;
    background-position:center;
}

.cult{
    background-color:#00d0c7;
    background-image:url("../img/cult.svg");
    background-size:cover;
    background-position:center;
}


/* SECTION PLAN */

.plan{
    color:#c984e2ff;
    background-color:#9b009b;
    background-image:url("plan.svg");
    background-size:cover;
    background-position:center;

    padding:40px;
    position:relative;
    padding-left:70px;   flex:1;
}
.plan::before{
    content:"";
    position:absolute;
    left: calc(30px - 3px);
    top:0em;
    bottom:0em;
    width:6px;
    background:#c984e2ff;
}
.plan h2{
    position:relative;
    margin-top:40px;
}
.plan h2::before{
    content:"";
    position:absolute;
    left:-50px;
    top:0.45em;
    width:20px;
    height:20px;
    border-radius:50%;
    background:#c984e2ff;
}
.phase{
    color:white;
}
.phase h2::before{
    background:white;
}
/* TEXTES */

h2{
    margin-top:0;
}


/* RESPONSIVE */

@media (max-width:800px){

    .three-columns{
        flex-direction:column;
    }

    .col{
        flex:100%;
    }

}