/*******************************  RESET ****************************************/

html {
    font-size: 62.5%;
}

/*= 10px*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    vertical-align: baseline;
    background: transparent;
}

ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}

ins {
    text-decoration: none;
}

del {
    text-decoration: line-through;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

* {
    box-sizing: border-box;
}

/************************************************************
                TEXT, LINKS & COLORS
*************************************************************/

@font-face {
    font-family: 'stanleyregular';
    src: url('../fonts/stanley-webfont.woff2') format('woff2'),
        url('../fonts/stanley-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'acumin_probold';
    src: url('../fonts/acumin_pro_bold-webfont.woff2') format('woff2'),
        url('../fonts/acumin_pro_bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'acumin_prolight';
    src: url('../fonts/acumin_pro_light-webfont.woff2') format('woff2'),
        url('../fonts/acumin_pro_light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'berthold_akzidenz_groteskMd';
    src: url('../fonts/akzidenzgroteskbe-md-webfont.woff2') format('woff2'),
        url('../fonts/akzidenzgroteskbe-md-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}


/************************************************************
                ROOT
*************************************************************/

:root {

    --titleFont: 'stanleyregular', arial, serif;
    --bodyFont: 'acumin_prolight', arial, sans-serif;
    --accentFont: 'acumin_probold', arial, sans-serif;

    --bgColor: #fafafa;
    --textColor: #1d1d1b;
    --vert: #5efdc3;
    --violet: #8d90fe;
    --orange: #fe9867;
    --vert_l: #9defd7;
    --rouge: #dd6b6b;
    --jaune: #fddf96;
    --gris_l: #f5f5f5;
    --gris: #d7d7d7;
    --rose: #feafc7;
    --bleu: #baf4fe;

    --lineHeight: 1.4;
    --fontSize: 1.8rem;
}


/************************************************************
                 STRUCTURE GÉNÉRALE
*************************************************************/
body {
    background-color: var(--bgColor);
    display: flex;
    flex-direction: column;
    align-items: center;
}


#content {

    /* Position contenu  */
    display: flex;
    min-height: 100vh;
    flex-direction: column;

    /* Style Général  */
    line-height: var(--lineHeight);
    font-size: var(--fontSize);
    color: var(--textColor);
    font-family: var(--bodyFont);

    width: 100%;
}

header,
footer {
    width: 100%;
}

header {
    display: flex;
    justify-content: center;
    /* ATTENTION*/
    align-items: center;
    padding: 16px 0 0 0;
    margin-bottom: 60px;
}

footer {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    bottom: 0px;
    background-color: var(--gris_l);
}


/************************************************************
                LIENS & BOUTONS
*************************************************************/
a {
    color: var(--textColor);
    text-decoration: underline;
    font-family: var(--accentFont);
    cursor: pointer;
}

a:focus,
a:visited,
a:active {
    color: var(--textColor);
}

h2 {
    font-family: var(--titleFont);
    font-size: 4rem;
    font-weight: normal;
    line-height: 1;
}
h5{
    font-size: 1.8rem;
}
h1,h2,h3,h4,h5,h6{
    font-weight:normal;
}
/************************************************************
                   NAV
*************************************************************/

nav {
    z-index: 10000;
    background-color: var(--gris_l);
    padding: 8px 0;
    display: flex;
    width:1300px;
}
nav input{
    display:none;
}
nav ul {
    display: flex;
    align-items: center;
    list-style: none;
    padding:0 32px;
}  

nav li {
    cursor: pointer;
}

nav a {
    margin-right: 32px;
    font-size: 1.4rem;
    font-weight: var(--navFontWeight);
    text-decoration: none;
}

nav li:last-child {
    justify-self: flex-end;
}

@media (max-width: 800px) {
    nav{
        width:100%;
        background-color: #fff;
        justify-content: center;
    }
    nav>a{
        display:none;
    }
    nav ul {
        background-color: var(--colorBack);
        display: none;
        list-style-type: none;
        opacity: 0;
        text-align: center;
        transition: all 1s ease;
    }
    nav ul a{
        display: block;
        font-size: 1.5em;
        margin: 2rem;
    }
    nav #menu-toggle:checked ~ ul {
        opacity: 1;
        z-index: 10000;
        position: absolute;
        bottom: 40px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        background: #fff;
    }    
    nav .label-toggle {
        background: transparent;
        cursor: pointer;
        float: right;
    }
    nav .label-toggle span{
        display:inline-block;
        height: 20px;
        width: 20px;
        background: linear-gradient(to bottom, var(--textColor) 0%, var(--textColor) 20%, transparent 20%, transparent 40%, var(--textColor) 40%, var(--textColor) 60%, transparent 60%, transparent 80%, var(--textColor) 80%, var(--textColor) 100%);
    }
}

/************************************************************
                    INDEX 
*************************************************************/


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



/************************************************************
                    Presentation
*************************************************************/

header img{
    width:396px;
}

section {
    display: flex;
    justify-content: center;
}

section:nth-of-type(2) {
    background-color: #edfded
}

section:nth-of-type(3) {
    background-color: var(--violet);
}

section:nth-of-type(4) {
    background-color: var(--orange);
}

section:nth-of-type(5) {
    background-color: var(--vert_l);
}

section:not(:first-child)>div:not(#stages):not(#actualites)>:first-child{
    margin-right: 100px;
    width:500px;
}

section:nth-of-type(2) img {
    width:500px;
}

section>div {
    padding: 80px 50px 40px 50px;
    width: 100%;
    display: flex;
    align-items: flex-start;
    max-width: 1300px;
}

section:not(:first-child) div div {
    display: flex;
    flex-direction: column;
}

section:not(:first-child) div p {
    font-size: 1.8rem;
/*    margin: 32px 0;*/
}

/************************************************************
                    Accueil
*************************************************************/
section>#accueil {
    display: initial;
    padding: 0;
}

#accueil>div:first-child {
    padding: 50px;
    background-color: var(--vert);
    position: relative;
    z-index: 9;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    margin: 0 80px;
}

#accueil>div:first-child div:first-child {
    flex: 1 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-right: 25px;
}
#accueil>div:first-child div:first-child h2 {
    margin-bottom: 8px;
}

#accueil>div:first-child div:last-child {
    flex: 1 0 0;
    display: flex;
    flex-direction: column;
    margin-left: 25px;
    line-height: 1.3;
}

.baseline {
    font-size: 3.6rem;
    font-family: var(--titleFont);
    line-height: 1;
}

#accueil>div:first-child div:last-child a {
    margin-top: 16px;
}

#accueil>div:nth-of-type(2) {
    padding: 0;
    display: flex;
}

#accueil img {
    margin: -64px 50px 0px 50px;
    max-width:1200px;
}
section:nth-of-type(2) div p{
    margin: 8px 0;
}



section:nth-of-type(3) h5,
section:nth-of-type(4) h2{
    padding-bottom:24px;
}

#fix p{
    padding-bottom:24px;
}


/************************************************************
                    Stages
*************************************************************/

section>#stages {
    display: initial;
    padding: 80px 50px 40px 50px;
}

#stages>div {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    margin: 0;
    grid-gap: 60px;
}

#stages article>div:first-child {
    min-width:250px;
    height: 250px;
    background-image: url('../images/lotus_25.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    margin: 4px 25px 0 0;

}

#stages article:nth-of-type(2)>div:first-child {
    background-image: url('../images/elan.jpeg');
}
#stages article:nth-of-type(3)>div:first-child {
    background-image: url('../images/goutte-eau.jpg');
}
#stages article:nth-of-type(4)>div:first-child {
    background-image: url('../images/minotaure24.jpg');
}
#stages article:nth-of-type(5)>div:first-child {
    background-image: url('../images/art_toucher.jpg');
}
#stages article:nth-of-type(6)>div:first-child {
    background-image: url('../images/transformation.jpg');
}
#stages article:nth-of-type(7)>div:first-child {
    background-image: url('../images/pressentiment_ange.jpg');
}

#stages h2 {
    padding-bottom: 32px;
}

#stages>div article {
    display: flex;
    align-items: start;
}

#stages>div article img,
section>#stages p {
    font-size: 1.6rem;
    margin: 4px 25px 0 0;
}

section>#stages h3 {
    font-family: var(--titleFont);
    font-size: 3rem;
    font-weight: normal;
    line-height: 1;
}

section>#stages a {
    font-size: 1.6rem;
    margin-top: 8px;
}

section>#stages span, 
section>#stages b{
    font-size: 1.6rem;
}


/************************************************************
                    Actualites
*************************************************************/
#actualites {
    display: flex;
}

#actualites div {
    display: flex;
    flex-direction: column;
    background-color: #b7fdfe;
    margin: 0 30px 0 0;
    padding: 50px;
    text-align: center;
    width: 47.5%;
}
#actualites div:last-child {
    background-color: #ffe166;
    margin: 0 0 0 30px;
}
#actualites p:first-of-type{
    margin: 32px 32px 0 32px;
}
#actualites p,
#actualites div>a {
    margin: 16px 32px 0 32px;
    line-height: 1.4;
}
#actualites h2 {
    font-size: 3.8rem;
}
#actualites p {
    font-size: 1.6rem;
}
#actualites a {
    font-size: 1.4rem;
}

#actualites img {
    margin: 0;
}


/************************************************************
                    Pub
*************************************************************/

#pub{
    background-color:#4746c8;
    color:#71fbfe;
    margin-bottom:150px;
    font-family: var(--accentFont);
}
#pub > div{
    padding-top:50px;
}
#pub > div > div{
    flex-direction:row;
}
#pub > div > div div{
    justify-content:space-between;
}
#pub img{
    width:257px;
    margin:0 145px;
}
#pub h4{
    font-family: var(--accentFont);
}
#pub p:first-of-type{
    font-size:2rem;
}
#pub p:nth-child(3){
    padding:30px 0;
    font-family: var(--bodyFont);
}

#pub a {
    color:#71fbfe;
}
/************************************************************
                    THematiques
*************************************************************/
.thematiques {
    display: flex;
    justify-content: center;
    margin-top:100px;
}

.thematiques>section {
    flex-direction: column;
    display: block;
    background-color: #fc7171;
    margin-top:20px;
}
.thematiques>section:last-of-type {
    margin-bottom:150px;
}
.thematiques>.center>div{
    display:flex;
    justify-content: center;
}
.thematiques>.center div div,
.thematiques > section:nth-child(2n).center > div > div{
    max-width:800px;
    text-align:center;
    font-size:1.8rem;
}
.thematiques>.center>div p{
    font-size:2rem;
}
.thematiques>.center>div p+p{
    margin:0;
}
.thematiques>.blue {
    background-color: #d6f6fa;
}
.thematiques>.blue>div img{
    width:450px;
    margin-top:0;
}
.thematiques>section>div{
    margin: auto;
    padding: 60px 30px;
}
.thematiques>section>div img{
    max-width:450px;
    display: block;
    margin :auto;
}
.thematiques>section>div p{
    margin-top:20px;
}

.thematiques>section:nth-child(1){
    margin-top:0;
    background-color: #daebfd;
}
.thematiques>section:nth-child(2){
    margin-top:0;
    background-color: #fefbed;
}
.thematiques>section:nth-child(1)>div:nth-child(1){
    position: relative;
  margin: -80px auto;
  padding: 0;
  flex-direction: column;
  justify-content: flex-start;
}
.thematiques .titre {
    padding: 44px 50px;
    background-color: #fe9867;
    margin:0 0 0 30px ;
}
.thematiques>section:nth-child(1)>div:nth-child(2){
    padding-top: 140px;
}
.thematiques>section:nth-child(1)>div:nth-child(2) img{
    margin:75px 0 0 40px;
}
.thematiques>section:nth-child(2n)>div>div{
    text-align:right;
}
.thematiques section:not(:first-child) > div:not(#stages):not(#actualites) > :first-child {
  width: initial
}
.thematiques .blue:not(:first-child) > div:not(#stages):not(#actualites) > img:first-child {
  width: 250px;
}



/************************************************************
                    Classic page
*************************************************************/
.classicpage {
    display: flex;
    justify-content: center;
    flex-direction: initial;
}

.classicpage>section {
    flex-direction: column;
    display: block;
}

.classicpage>section>div>img{
    width:100%;
}

.titre {
    padding: 30px 50px 50px 50px;
    background-color: var(--violet);
    position: relative;
    z-index: 9;
    display: inline-block;
    margin: 0 30px;
    width: 600px;
}

h3 {
/*    text-transform: uppercase;*/
    font-size: 1.6rem;
}

h4 {
    font-family: var(--titleFont);
    font-size: 2.8rem;
    font-variant-ligatures: common-ligatures;
    line-height: 1.2;
    width: 700px;
    margin-bottom: 2.4rem;
}

.classicpage div:not(.titre) p {
    width: 700px;
    margin-bottom: 2.4rem;
    line-height: 1.4;
}
.classicpage i {
    font-size:1.4rem;
}
.classicpage>section>div:nth-child(2) {
    padding: 0;
    margin: -100px 0 0 0;
}

.classicpage>section>div:nth-child(3) {
    display: block;
    padding: 50px;
    background-color: var(--vert);
    display: inline-block;
    margin: -100px 30px 0px 30px;
    width: 860px;
}

.classicpage>section>div:nth-child(4) {
    display: flex;
    justify-content: flex-end;
    max-width: 1300px;
    padding: 50px 60px 50px 0px;
    margin: -300px 0px 150px 0px;
    background-color: var(--gris);
    z-index: -1;
    position: relative;
}
.classicpage>section>div:nth-child(4) img {
    width:400px;
}


em {
    text-transform: uppercase;
    font-weight: bold;
    font-style: normal;
    font-family: var(--accentFont);
    font-size: 1.3rem;
    display: inline-block;
}

em::first-letter {
    font-size: 1.6rem;
}

.dot{
    font-size:0.8em;
}
b{
    font-family: var(--accentFont);
    font-weight: normal;
}

/************************************************************
                    Biodanza
*************************************************************/
.biodanza {
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.biodanza section {
    flex-direction: column;
    padding: 70px 140px;
}

.biodanza section div {
    flex-direction: column;
    padding: 0;
}

.biodanza section:nth-of-type(2) {
    background-color: var(--vert);
}

.biodanza section:nth-of-type(3) {
    background-color: #FFF;
    flex-direction: row;
    padding-bottom: 150px;
}


.biodanza section p {
    width: 80%;
    margin-bottom: 2.4rem;
    line-height: 1.4;
}

.biodanza section:first-child {
    height: 430px;
    background-image: url('../images/biodanza_her.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.biodanza section:last-child > div {
    width: initial;
}
.biodanza section:last-child  p {
    width: initial;
    margin-right:120px;
}
.biodanza section:last-child  h4 {
    width: initial;
}

.biodanza section .fix {
    text-align: center;
}

.biodanza section .fix h4 {
    width: initial;
    padding: 80px 40px;
}
.biodanza section:not(:first-child)>div:not(#stages):not(#actualites)>:first-child{
    margin-right: 0;
    width:500px;
}

.biodanza section span {
    font-size: 1.6rem;
}

.biodanza section span+h4 {
    margin: 0;
}
.biodanza section:nth-of-type(3) h3{
    margin-bottom: 32px;
} 


/************************************************************
                   COntact
*************************************************************/
.contact section>div {
    display: initial;
    padding: 0;
}

.contact section>div>div:first-child {
    padding: 200px;
    position: relative;
    z-index: 9;
    margin: 0 80px;
    background-image: url('../images/contact.jpg');
    background-position: center;
    background-repeat: no-repeat;
}

.contact section>div>div:last-child {
    background-color:#eee;
    margin: -110px 0 150px 0;
    padding: 150px 100px;
    display: flex;
}

.contact section>div>div>div:first-child {
    width: 35%;
    margin: 0 50px 0 0;
}

.contact section>div>div>div:first-child h4 {
    margin-bottom: 70px;
}

.contact section>div>div>div:first-child strong {
    font-size: 1.4rem;
    font-family: var(--accentFont);
    display: block;
    margin: 24px 0 12px 0;

}

form {
    display: flex;
    flex-direction: column;
}

form>div {
    display: flex;
    justify-content: space-between;
    margin: 8px;
}

form input {
    width: 100%;
    border-radius: 0;
    border: 1px solid #7b7b7b;
}

form>div:first-child div {
    display: flex;
    flex: 0 1 48%;
}

form>div:nth-child(3) {
    flex-direction: column;
}

form p {
    border: 1px solid #7b7b7b;
    padding:5px;
    color:#7b7b7b;
}

form textarea {
    height: 150px;
    border: 1px solid #7b7b7b;
    margin: 0;
}

form>div p {
    width: 130px;
    text-align: center;
}

form>div:nth-child(3) p {
    width: 100%;
}


#extensions{
    background-color: var(--vert);
    display:flex;
    height:calc( 100vh - 224px);
    display:flex;
    justify-content: center;
    align-items:center;
}
.contact form>div:last-child{
    justify-content:center;
}
.contact button{
    width: 130px;
    text-align: center;
    border: 1px solid #7b7b7b;
    padding:5px;
    color:#7b7b7b;
    border-radius:none;
    font-size:18px;
    cursor:pointer;
}




/************************************************************/
                   
@media (max-width: 1300px) {
    #accueil img {
        width: 100%;
    }
}
@media (max-width: 1200px) {
        .biodanza section:not(:first-child)>div:not(#stages)>:first-child{
        margin-right: 0;
        width:300px;
    }
    .classicpage > section > div:nth-child(4) {
      align-items: center;
      padding: 20px;
      margin: -30px 0 140px 0;
    }  
    .classicpage > section > div:nth-child(4) img{
      padding:20px;
    }
    .contact h4{
        width:initial;
    }
}
@media (max-width: 1020px) {
    section>div {
    flex-direction: column;
    padding: 50px;
    }
    section:not(:first-child)>div:not(#stages):not(#actualites)>:first-child {
    margin: 0 0 25px 0;
    }
    header{
    margin-bottom: 30px;
    }
    #accueil>div:first-child,
    #actualites  {
    flex-direction: column;
    }
    #accueil>div:first-child div:first-child {
    margin:0 0 25px 0;
    }
    #accueil>div:first-child div:last-child; {
    font-size:1.6rem;
    margin:0 0 0 0;
    }
    .baseline,h2 {
    font-size:3rem;
    }
    #stages article>div:first-child {
    min-width:100px;
    height: 100px;}
    #actualites  {
    align-items: center;
    }
    #actualites div {
        width:initial;
    max-width: 600px;
    margin:0;
    }
    #actualites div:last-child {
        margin: 30px 0 0 0 ;
    }
    #pub img{
        margin:0 45px;
    }
    .biodanza section:first-child {
    height: 230px;
    }
    .biodanza section {
    flex-direction: column;
    padding: 50px;
    }
    .biodanza section p {
        width: initial;
        margin-bottom: 2.4rem;
    }
    .biodanza section:nth-of-type(3) {
    flex-direction: column;
    }
    .biodanza section:last-child > div {
    align-items:center;
    margin-top:20px;
    }
    .biodanza section:last-child p {
      margin-right: 0;
    }
    .biodanza h4 {
      width:initial;
      text-align:center;
    }
    .biodanza section .fix h4 {
      padding: 20px 0px;
      width:400px;
    }
    .biodanza section:not(:first-child) > div:not(#stages):not(#actualites) > :first-child{
      margin-right: 0;
      width: 100%;
          text-align: center;
    }
    .classicpage>section>div:nth-child(3) {
    padding: 30px;
    width: initial;
    }
    .classicpage h4,
    .classicpage div:not(.titre) p,
    .titre {
    width: initial;
    }
    .contact section>div>div:first-child {
    padding: 100px;
    }
    .contact section > div > div:last-child {
      flex-direction:column;
      padding:50px;
      padding-top:150px;
    }
    .contact section > div > div > div:first-child {
      width: initial;
      margin:0 0 40px 0;
    }
    .contact section > div > div > div:first-child h4 {
      margin-bottom: 20px;
    }
}
@media (max-width: 600px) {    
    header{
    margin-bottom:10px;
    }
    header img{
    width:196px;
    }
    section>div,
    section>#stages  {
    padding: 30px;
    }
    section:not(:first-child) div p,
    #content{
    font-size: 1.6rem;
    }
    #accueil img {
     margin: -64px 13px 0 13px;
    }
    section:not(:first-child)>div:not(#stages):not(#actualites)>:first-child,
    section:nth-of-type(2) img  {
    width:100%;
    }
    #accueil>div:first-child {
    padding:25px;
    margin:25px;
    }
    #stages>div {
        display: flex;
        grid-gap: 40px;
    }
    #stages article>div:first-child {
    min-width:100px;
    height: 100px;margin: 0 25px 5px 0;}
    #stages>div article {
    flex-direction: column;
    }
    #actualites {
    display: flex;
    flex-direction:column;
    padding:25px;
    }
    #actualites div {
    padding:25px;
    width:100%;
    }
        #actualites img {
        width: 100%;
    }

    #actualites p:first-of-type{
        margin: 32px 0 0 0;
    }
    #actualites p,
    #actualites div>a {
        margin: 16px 0 0 0;
    }
    #pub > div > div{
        flex-direction:column;
    }
    #pub > div > div div{
        padding-top:20px;
    }
    #pub h4{
        width:initial;
    }
    .biodanza section .fix h4 {
    padding: 20px 0px;
    width: initial;
    }
    .titre{
    padding:20px;
    }     
    .classicpage > section > div:nth-child(2),
    .classicpage > section > div:nth-child(3){
      margin-top:-10px;
    }
    .classicpage > section > div:nth-child(4) img{
      width:300px;
    }
    .contact section>div>div:first-child {
    padding: 50px;
    margin:0 20px;
    }
    .contact section > div > div:last-child {
      margin-top:-50px;
      padding:20px;
      padding-top:70px;
    }
    .reverse div{
        flex-direction: column-reverse;
    }
.thematiques>.blue>div img,
    .thematiques>section>div img,
.thematiques>section:nth-child(1)>div:nth-child(2) img,
.thematiques section:not(:first-child) > div:not(#stages):not(#actualites) > :first-child,
.thematiques .blue:not(:first-child) > div:not(#stages):not(#actualites) > img:first-child {
  width: 100%;
  margin:0 0 20px 0;
}
.thematiques>section:nth-child(2n)>div>div{
    text-align:left;
}
.thematiques .titre{
    padding: 20px;
  margin: 10px;
}

}

/*************************************************************/