*{box-sizing: border-box; list-style: none; font-family: Raleway,sans-serif; color: #000000;}
a {text-decoration: none;}
img{max-width:100%; height:auto}



/*_____COULEURS_____
#F2F0EB
#000000*/

body{background-color: #F2F0EB; margin: 20px 30px}

/*__________HEADER__________*/
header {font-size: 35px; width: 100%}

header img {width: 100px; height: 100px}

/*_____ICONE BURGER__________*/
header nav {text-align: right}

header nav > a {display: inline-block;text-align: center;margin : 20px 30px}

/*______MENU DE NAV_____*/
header nav ul {font-size: 25px; padding: 0; margin-right: 20px}

header nav ul {display: none}
header nav ul.show {display: block;}

header nav li a {color : #000; display: block; margin : 150px 0}

header nav li a::after {
content: '';
display: block;
height: 0.5px;
width: 200px;
background-color: #000000;
margin-top: 10px}

/*_______________________________________MAIN_________________________*/

/*_______AUTRES_______*/
h2 {font-family: 'Playfair Display', serif; font-size: 36px; font-weight: normal; margin-left: 0px; margin-bottom: 0}
p{font-size: 20px; line-height: 150%}

h2::after{
  content: '';
  display: inline-block;
  width: 70px;
  height: 0.5px;
  background-color: #000;
  margin-left: 10px;}


  /*___________FLEXBOXES____________*/
  .flex {display:flex}
  /* alignement horizontal (vertical en colonnes) */
  .justify-center{ justify-content: center}
  .justify-between{justify-content: space-between}
  /* alignement vertical (horizontal en colonnes) */
  .align-center{align-content: center}
  .row {flex-direction: row;}

  /*____________________________TABLETTE____________________*/
  @media screen and (min-width:740px) {
    body {margin: 20px 70px }
    p {width: 400px }
    p::before {position: absolute;left :70px;}
    h2::after {width: 150px}
  }

  /*_____________________________________________________DESKTOP_________*/
  @media screen and (min-width:960px) {

  /*MENU*/
  /*masquer after*/
  header nav li a::after {display: none}
  /*masquer menu burger*/
  header nav > a {display: none}
  body {margin : 20px 80px}

  header div {height: 100px; border-style : solid; border-color: #000000; border-width: 2px; padding: 0 50px; margin-top: 50px}

  .borderlogo {border-style : solid; border-color: #000000; border-width: 2px; border-top-width: 0; border-bottom-width: 0; margin : 0; padding : 10px 20px }

  header nav {text-align: center}
  header img {width: 100px; height:100px; margin-top: -12px}

  header nav ul {display :flex; font-size: 16px;}
  header nav ul li a{margin-left: 80px; margin-top: 25px; margin-bottom: 0}

  /*___________EFFET DE NAV__________*/

  .effet::after{
  content: '';
  display:block;
  width:300px;
  height:1px;
  background:#000;
  margin-top: 5px; margin-left: 80px}

  .effet::after{
  width: 0;
  transition: width 0.5s ease}


  .effet:hover::after{
  width: 50px;}

  /*_______________________________MAIN____________________________*/

  /*_______AUTRES_____*/
  h2{font-size: 48px; font-weight: normal; margin-left: 60px; margin-bottom: 0; margin-top:20px}
  h2::after {width: 240px;}
  p {width: 465px; margin-left: 60px}

  /*________________________________FULL DESKTOP_____________________________*/
  @media screen and (min-width:1300px) {
    body {margin : 20px 140px}
    h2{margin-left: 140px}

    p{ margin-left: 140px}
    p::before {position: absolute;left :350px;}
    .btn {margin-left: 140px}
    .btnr{margin-left: 140px; margin-top: 50px;}
  }