/* AJOUT FONTES*/

@font-face {
    font-family: 'MAZIUS';
    src: url('../font/MAZIUSREVIEW2009-Regular.woff2') format('woff2'),
        url('../font/MAZIUSREVIEW2009-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../font/Inter-SemiBold.woff2') format('woff2'),
        url('../font/Inter-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../font/Inter-Regular.woff2') format('woff2'),
        url('../font/Inter-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../font/Inter-Light.woff2') format('woff2'),
        url('../font/Inter-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

/*STYLE*/

body{
    background-color: #6bcc6b;
    font-family: 'Inter', sans-serif;
    font-weight: normal;
    color: #505050;
    background-image: url("../img/logo-blanc-50.png");
    background-repeat: no-repeat;
    background-position: -40px -40px;
    background-size: 300px;
    /*background-attachment: fixed;*/
}

section{
    max-width: 800px;
    margin: auto;
    padding: 50px 60px 80px 60px;
    background-color: white;
    margin-top: 30px;
    margin-bottom: 30px;
    clip-path: polygon(
      0% 0,
      2% 0,
      4% 0.1%,
      6% 0,
      8% 0.2%,
      10% 0,
      12% 0.15%,
      14% 0,
      16% 0.1%,
      18% 0,
      20% 0.2%,
      22% 0,
      24% 0.12%,
      26% 0,
      28% 0.18%,
      30% 0,
      32% 0.08%,
      34% 0,
      36% 0.2%,
      38% 0,
      40% 0.1%,
      42% 0,
      44% 0.17%,
      46% 0,
      48% 0.09%,
      50% 0,
      52% 0.2%,
      54% 0,
      56% 0.13%,
      58% 0,
      60% 0.19%,
      62% 0,
      64% 0.11%,
      66% 0,
      68% 0.2%,
      70% 0,
      72% 0.14%,
      74% 0,
      76% 0.16%,
      78% 0,
      80% 0.1%,
      82% 0,
      84% 0.2%,
      86% 0,
      88% 0.15%,
      90% 0,
      92% 0.12%,
      94% 0,
      96% 0.18%,
      98% 0,
      100% 0.08%,
    100% 100%,
      98% 100%,
      96% 99.92%,
      94% 100%,
      92% 99.88%,
      90% 100%,
      88% 99.94%,
      86% 100%,
      84% 99.85%,
      82% 100%,
      80% 99.96%,
      78% 100%,
      76% 99.9%,
      74% 100%,
      72% 99.98%,
      70% 100%,
      68% 99.91%,
      66% 100%,
      64% 99.99%,
      62% 100%,
      60% 99.87%,
      58% 100%,
      56% 99.96%,
      54% 100%,
      52% 99.89%,
      50% 100%,
      48% 99.97%,
      46% 100%,
      44% 99.9%,
      42% 100%,
      40% 99.93%,
      38% 100%,
      36% 99.87%,
      34% 100%,
      32% 99.94%,
      30% 100%,
      28% 99.99%,
      26% 100%,
      24% 99.89%,
      22% 100%,
      20% 99.95%,
      18% 100%,
      16% 99.91%,
      14% 100%,
      12% 99.96%,
      10% 100%,
      8% 99.89%,
      6% 100%,
      4% 99.92%,
      2% 100%,
      0% 99.97%
    );
    
}

h1, h2{
    font-family: MAZIUS;
    font-weight: normal;
}

h1{
    font-size: 2.5em;
    margin: 0 0 0 0;
}

h2{
    font-size: 2em;
    color: #6bcc6b;
}

p{
    line-height: 1.5;
}

#chapo{
    font-weight: 600;
}

a{
    color: #505050;
    font-weight: 600;
    /*text-decoration:none;*/
}

a:hover{
    color: white;
    background: #6bcc6b;
    text-decoration:none;
}

#credits{
    text-align: center;
}

img{
    max-width: 760px;
    border: 2px solid #cfcfcf;
}

.copierligne{
    border-style: hidden;
    max-height: 2em;
}

hr{
    margin-top: 3em;
    margin-bottom: 3em;
    width: 10em;
    border: 1px solid #505050;
}

/*MEDIA QUERIES*/

@media all and (max-width: 320px){
 
    body{
        background-image: none;
    }

    section{
        padding: 20px 20px 20px 20px;
        margin:10px 10px 10px 10px;
    }

    h1{
        font-size: 1.8em;
    }

    h2{
        font-size: 1.6em;
    }

    p{
        font-size: 0.7em;
    }

    img{
        width:100%;
    }

    .copierligne{
        width:auto;
    }
} /* petit mobile */


@media all and (min-width: 321px) and (max-width: 480px){
 
    body{
        background-image: none;
    }

    section{
        padding: 30px 30px 30px 30px;
        margin:15px 15px 15px 15px;
        }
    }

    h1{
        font-size: 2em;
    }

    h2{
        font-size: 1.8em;
    }

    img{
        width:100%;
    }

    .copierligne{
        width:auto;
    
} /* mobile */

@media all and (min-width: 481px) and (max-width: 768px){
    body{
        background-position: -10px -10px;
        background-size: 15%;
    }

    section{
        padding: 30px 30px 30px 30px;
        width: 75%;
    }

    img{
        width:100%;
    }

    .copierligne{
        width:auto;
    }
} /* tablette portrait */

@media all and (min-width: 769px) and (max-width: 960px){

    section{
        padding: 30px 30px 30px 30px;
        max-width: 600px;
    }

    img{
        width:100%;
    }

    .copierligne{
        width:auto;
    }    

} /* tablette paysage */

/*@media all and (min-width: 961px){
} /* ordinateur et + */