*
{
    box-sizing: border-box
}

body, header, div, nav, section, ul, li, h1, h2, h3, h4, h5, h6, button, p, input
{
    margin: 0;
    padding: 0
}

.poppins-thin {
  font-family: "Poppins", sans-serif;
  font-weight: 100;
  font-style: normal;
}



h1, h2, h3, h4
{
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: normal;
}

h5, h6
{
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: normal;
}

ul
{
    list-style-type: none
}

a
{
    text-decoration: none
}

body
{
   font-family: "Poppins", sans-serif;
   background: #f3f2f3
}

input[type=radio]
{
    display: none
}

input[type=radio] + label:before
{
    content: '';
    float: left;
    margin-right: 8px;
    width: 20px;
    height: 20px;
    border: 1px solid grey;
    border-radius: 50%;
    background: white
}

input[type=radio]:checked + label:before
{
    box-shadow:inset 2px 2px 2px 2px #c2000c;
}


.lien
{
    display: block;
    width: 100%;
    color: #c2000c
}

.lien:hover
{
    color: black;
    text-decoration: underline
}

.erreurs
{
    color: red;
    font-weight: bolder;
    margin-bottom: 30px; 
    overflow: hidden
}

header
{
    max-width: 100%;
    background: white;
    overflow: hidden
}

.sub-head
{
    height: 40px;
    margin-bottom: 20px;
    background: #d2247c
}

.sub-head li
{
    float: right;
    margin-left: 30px
}

.sub-head a
{
    color: white;
    line-height: 40px
}

.sub-head a:hover
{
    text-decoration: underline
}

.logo
{
    height: 120px;
    width: 100%;
    margin-bottom: 20px;
    text-align: center;
    background: white;
    padding: 10px 20px 10px 20px;
}

.logo img
{
    height: 100%
}

.main-menu
{
    max-width: 1200px;
    font-family: 'TT Fors Trial Bold';
    margin: 0 auto;
    margin-bottom: 40px;
    border-top: solid 2px #d2247c;
    border-bottom: solid 2px #d2247c;
    overflow: hidden
}

.main-menu li
{
    float: left;
    margin-right: 20px
}

.main-menu a
{
    color: black;
    line-height: 50px;
    font-size: 1.2em;
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-style: normal;
}

.main-menu ul:first-child a:hover
{
    color: #d2247c
}

.main-menu ul:last-child
{
    float: right;
    padding: 0px 20px 0px 20px;
    background: #d2247c
}

.main-menu ul:last-child a
{
    color: white
}

.main-menu ul:last-child a:hover
{
    text-decoration: underline
}

.main-menu ul:last-child a i
{
    margin-right: 10px
}


.pg-title
{
    width: 100%;
    height: 60px;
    text-align: center;
    margin-bottom: 60px;
    border-top: dotted 8px #f3f2f3;
    background: #faf2f5;
    color: #d2247c;
    overflow: hidden
}

.pg-title h5
{
    padding-top: 10px
}

.intro
{
    height: 200px;
    background: #d2247c;
    overflow: hidden
}

.intro div
{
    float: left;
    height: 100%;
    width: 400px;
    text-align: center;
    background: url('../medias/douleur.jpg')
}

.intro h1
{
    margin-top: 10px;
    color: #d2247c;
    line-height: 50px;
    font-family: "Poppins", sans-serif;
    font-weight: 900;
    font-style: normal;
}

.intro span
{
    padding: 0px 50px 0px 50px;
    color: #ffee3b
}

.intro p
{
    padding: 20px;
    width: calc(100% - 430px);
    float: right;
    color: white;
    font-size: 1.4em
}

.main, main
{
    max-width: 1200px;
    margin: 0 auto;
    overflow: hidden;
    margin-bottom: 60px;
}

main
{
    box-shadow: 20px 10px 20px rgba(0,0,0,0.1);
}

.pg-wrapper
{
    padding: 20px;
    background: white;
    overflow: hidden
}

.pg-wrapper h4
{
    margin-bottom: 30px;
    color: #d2247c
}

.pg-wrapper strong
{
    display: block;
    margin-bottom: 30px;
    font-size: 1.2em;
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-style: normal;
}

.accroche
{
    text-align: center;
    color: #d2247c
}

.edito
{
    float: right;
    width: calc(100% - 280px);
    background: white;
    overflow: hidden
}

.edito div
{
    width: 100%;
    overflow: hidden
}

.edito div img
{
    width: 100%
}

.edito p
{
    padding: 20px;
    font-size: 1.2em
}

.questions h5
{
    margin: 0px 0px 15px 20px
}

.questions
{
    float: left
}

.questions ul
{
    border-top: solid 2px #d2247c;
    background: white;
    width: 250px;
    padding: 10px 20px 0px 20px
}

.questions li
{
    padding: 10px 0px 10px 0px
}

.questions li:not(:last-child)
{
    border-bottom: dotted 1px grey
}

.questions a
{
    color: black
}

.questions a:hover
{
    color: #d2247c
}

.infos
{
    width: 100%;
    margin-bottom: 60px;
    overflow: hidden
}

.paralax
{
    width: 100%;
    height: 320px;
    background: url('../medias/paralax.jpg');
    background-size: 100% auto;
    background-position-y: 1000px
}

.formulaire > ul
{
    margin-bottom: 15px
}

.formulaire > ul > li
{
    margin-bottom: 5px;
    width: 100%;
    overflow: hidden
}

.formulaire > ul > li li
{
    width: 49%;
    float: left;
}

.formulaire > ul > li li:last-child
{
    float: right
}

.formulaire input, .formulaire textarea
{
    width: 100%;
    padding: 0px 10px 0px 10px;
    outline: none;
    border: dotted 1px #999;
    font-size: 1em
}

.formulaire textarea
{
    height: 120px;
    padding: 10px
}

.formulaire input:focus, .formulaire textarea:focus
{
    border: solid 1px #999
}

.formulaire input
{
    height: 50px
}

.formulaire text
{
    padding-top: 10px;
    padding-bottom: 10px
}

.formulaire button
{
    border: none;
    line-height: 50px;
    width: 300px;
    background: #d2247c;
    color: white;
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-style: normal;
}

.formulaire button i
{
    display: block;
    float: left;
    height: 50px;
    width: 40px;
    background: black
}

.formulaire button:hover
{
    background: black
}

.info-form
{
    width: 600px;
    padding: 20px;
    background: white;
    margin: 0 auto;
    margin-top: -90px
}

.info-form h3
{
    margin-bottom: 15px
}

.info-form p
{
    margin-bottom: 30px
}

.don
{
    width: 100%;
    height: 300px;
    color: white;
    text-align: center;
    background: url('../medias/don.jpg');
    background-size: 100% auto;
    overflow: hidden
}

.don h3
{
    margin-top: 20px;
    font-size: 5em
}

.don h4
{
    font-size: 3em;
    margin-bottom: 30px
}

.don a
{
    padding: 10px 60px 10px 60px;
    width: 350px;
    line-height: 60px;
    border-radius: 30px;
    background: #ffee3b;
    color: black;
    font-size: 1.3em
}

.don a:hover
{
    background: white;
    color: #d2247c
}

footer
{
    border-top: dotted 4px #ffee3b;
    padding-top: 40px;
    background: #d2247c;
    overflow: hidden
}

.ft-wrapper > ul > li
{
    float: left;
    width: 180px;
    margin-right: 30px
}

.ft-wrapper li li
{
    margin-bottom: 10px
}

.ft-wrapper h6
{
    margin-bottom: 15px;
    color: #ffee3b
}

.ft-wrapper a, .ft-wrapper p
{
    color: white
}

.ft-wrapper a:hover
{
    color: #ffee3b
}

.social i
{
    font-size: 1.7em
}


/*------------------------------  PAGE CONTACT */

.pg-contact
{
    width: 100%
}

.pg-contact div:first-child
{
    float: left;
    width: 45%
}

.pg-contact div:first-child li
{
    margin-bottom: 15px
}

.pg-contact div:first-child i
{
    font-size: 1.4em
}

.pg-contact div:last-child
{
    float: right;
    width: 50%
}

/*------------------------------  PAGES */
.question li
{
    margin-bottom: 30px
}

.question h5
{
    margin-bottom: 10px;
    padding: 15px;
    border-radius: 20px;
    background: #fcfbeb
}

.question p
{
    margin-left: 20px
}

.details li
{
    height: 130px;
    margin-bottom: 15px;
    box-shadow: 10px 0px 10px rgba(0,0,0,0.05);
    overflow: hidden
}

.details img
{
    float: left;
    margin-right: 20px;
    height: 100%;
    background: black
}

.details h5
{
    margin: 20px 0px 15px 0px
}

.details p
{
    
}


.modale
{
    position: fixed;
    display: flex;
    align-items: center;
    width: 100%;
    top: 0px;
    bottom: 0px;
    background: rgba(0,0,0,0.8);
    top: 100vh;
    opacity: 0;
    transition: .3s;
    overflow: hidden
}

.modale > div
{
    width: 600px;
    margin: 0 auto;
    padding: 20px;
    background: white;
    text-align: center;
    overflow: hidden
}

.modale p
{
    margin-bottom: 30px
}

.modale button
{
    width: 150px;
    height: 30px;
    border: none;
    background: #d2247c;
    color: white
}

.modale button:hover
{
    background: black
}

@media screen and (max-width: 720px)
{
    
    .intro
    {
        height: auto
    }
    
    .intro div, .intro p
    {
        width: 100%;
        text-align: center;
    }
    
    .intro div
    {
        height: 200px
    }
    
    .questions
    {
        display: none
    }
    
    .edito, .edito div
    {
        width: 100%
    }
    
    .edito div
    {
        margin-bottom: 20px
    }
    
    .edito p
    {
        text-align: center
    }
    
    .info-form, .formulaire button
    {
        width: 100%
    }
    
    .formulaire > ul > li li
    {
        width: 100%
    }
    
    .formulaire > ul > li li:first-child
    {
        margin-bottom: 5px
    }
    
    .formulaire textarea, .formulaire input
    {
        text-align: center
    }
    
    .don
    {
        height: 210px
    }
    
    .don h3
    {
        font-size: 3em
    }
    
    .don h4
    {
        font-size: 1.6em;
        margin-bottom: 20px
    }
    
    .main-menu
    {
        border: none
    }
    
    .main-menu, .main-menu li
    {
        width: 100%;
        margin: 0;
        text-align: center
    }
    
    .main-menu ul
    {
        width: 100%
    }
    
    .main-menu a
    { 
        width: 100%;
        display: block
    }
    
    .main, .details li, .details img
    {
        width: 100%
    }
    
    .ft-wrapper > ul > li
    {
        width: 100%;
        text-align: center;
        margin-bottom: 25px
    }
    
    .pg-contact div:first-child, .pg-contact div:last-child
    {
        width: 100%
    }
    
    .details li
    {
        height: auto;
        margin-bottom: 40px
    }
    
    .details img
    {
        margin-bottom: 20px
    }
    
    .details h5
    {
        text-align: center;
        padding-top: 20px
    }
    
    .details p
    {
        text-align: center
    }
    
    .don
    {
        
    }
}