/*
Theme Name : Laura Pommier Avocate
Text Domain: Laura Pommier Avocate
Author: eO10Design
Author URI: https://www.eo10Design.com/
Description : Theme pour le site Laura Pommier Avocate.com
Version : 1.0
*/

/*---------------------------------------
  FONT
-----------------------------------------*/

/* 
.montserrat-<uniquifier> {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
} 
  
.oswald-<uniquifier> {
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

*/


/*---------------------------------------
  CUSTOM PROPERTIES ( VARIABLES )
-----------------------------------------*/

:root {
  --white-color:                #FFFFFF;
  --black-color:                #000000;
  --primary-color:              #2e3b3d;
  --second-color:               #2e3b3d;
  --vert-color:                 #8cbe9e;
  --beige-color:                rgb(199, 189, 179);
  --blancCasse-color:           #d0d0d0;
  --grisFonce-color:           #303030;
  --grey-color:                 #d0d1d1;
  --p-color:                    #717275;

  --body-font-family:           "Montserrat", sans-serif;
  --body-font-family-titre:     "Oswald", sans-serif;

  --nav-li-font-size:           18px;
  --h5-font-size:               24px;
  --p-font-size:                20px;
  --copyright-text-font-size:   16px;
  --product-link-font-size:     14px;
  --custom-link-font-size:      12px;

  --font-weight-thin:           100;
  --font-weight-extralight:     200;
  --font-weight-light:          300;
  --font-weight-regular:        400;
  --font-weight-medium:         500;
  --font-weight-semibold:       600;
  --font-weight-bold:           700;
  --font-weight-extrabold:      800;
  --font-weight-black:          900;

  --font-style-normal:          'normal';
  --font-style-italic:          'italic';

  --sixCent:                    600px;

}

/*---------------------------------------
  RESET
-----------------------------------------*/

*, ::before, ::after {
	box-sizing: border-box;
	margin:0;
	padding:0;
}

/*---------------------------------------
  BODY
  -----------------------------------------*/

body {
    background-color: var(--blancCasse-color);
}

body.overflow {
  overflow-x: hidden;
}

body, html {
	margin:0;
	padding:0;
	font-family: var(--body-font-family);
	width:100%;
  /* overflow-x: hidden; */
}

video {
  margin:0;
  
}

#background-video {
  /* background-color: aqua; */
    position: relative;
    z-index: 2;
    object-fit: cover;
    height: auto;
    width : 100%;
    /* min-height: 100vh; */
    /* max-width: 1920px; */
    /* left: 0;
    right: 0;
    top: 0;
    bottom: 0; */
    }

.photoEntete {
  position: relative;
  object-fit: cover;
  /* z-index: 0; */
  background-image: url("images/pointsGrisClairs.png");
}

.photoEntete img,.photoEnteteBis img {
  position: fixed;
  z-index: -1;
  width:100%;
  height: auto;
}

.photoEnteteBis {
  position: relative;
  width:100vw;
  object-fit: cover;
  background-image: url("images/pointsGrisClairs.png");
}

/*---------------------------------------
  TYPO
-----------------------------------------*/

h1,h2,h3 {
  font-family: var(--body-font-family-titre);
  text-transform: uppercase;
  font-weight: 700;
  font-size: 3em;
  margin:0.5em 0;
}

h1 {
  margin:0;
}

.titreDomaine h1 {
  text-shadow: 1px 1px 5px black;
  margin-top: 4em;
}

h3 {
  font-size: 1.5em;
  text-align: center;
  font-weight: 400;
}

h4 {
  font-size: 1.3em;
  font-weight: 700;
}

p {
  font-family: var(--body-font-family);
  font-size: 1.2em;
}

hr {
  margin:20px 0;
}

.demiLarge {
  width:40%;
  margin:1em auto;
}

.marges {
  margin:1.5em 0;
}

.margeBottom {
  margin: 5em 0;
}

/*---------------------------------------
  SECTIONS
  -----------------------------------------*/

    #sectionDomaines,#sectionPresentation,#sectionActualite {
      /* background-color: aqua; */
      position: relative;
      z-index:2;
      width : 100%;
      min-height: 100vh;
      margin-top:0px;
    }

    #sectionDomaines {
      margin-top :-1em;
    }

    .clair,.fonce {
      display:flex;
    }

    .clair {
      position: relative;
      z-index: 10;
      width:100%;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background-color: var(--white-color);
      /* background-image: url("images/pointsGris.png"); */
      background-position: left;
    }

    .fonce {
      position: relative;
      display: flex;
      background-color: var(--grisFonce-color);
      color : var(--white-color);
      /* height: auto;
      width : 100%; */
      /* height: 100vh; */
      /* background-image: url("images/pointsGrisClairs.png"); */
    }

    .contact {
      position: relative;
      height:100vh;
      z-index:1;
    }

    .contentPartie {
     width:90%;
     display: flex;
     /* flex-direction: column; */
     /* text-align: flex-start; */
    }

    .contentPartieBtn {
      margin-top:4em;
      display: flex;
      width:80%;
      justify-content: center;
      align-items: center;
    }

  /*---------------------------------------
  NAVIGATION ET BOUTONS
  -----------------------------------------*/

  a.btnSuite img {
    width:50px;
    height: 50px;
    transition: all 0.2s ease-in-out;
    margin: 1em 0;
  }

  a.btnSuite img:hover {
      transform: scale(1.1);
      cursor: pointer;
  }

  .btnStyle a {
    background-color: var(--black-color);
    color: var(--white-color);
    padding:0.8em;
    margin:0.3em;
    text-decoration: none;
    border-radius: 0.3em;
    transition: all 0.2s ease-in-out;
  }

  .btnStyle a:hover {
    background-color: #303030;
  }

  /*---------------------------------------
  PARTIE 01 : DOMAINES
  -----------------------------------------*/

  .introDomaines {
    /* background-color: crimson; */
    width:80%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom:2em;
  }

  .domaines {
    /* background-color: aqua; */
    display:flex;
    justify-content: center;
    align-items: center;
  }

  .itemDomaines {
    position: relative;
    /* background-color: var(--grisFonce-color); */
    color : var(--white-color);
    width:32%;
    /* height:60vh; */
    /* min-height : 500px; */
    margin:1em 0.5em;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 0.4em;
    box-shadow: 2px 2px 5px #303030;
  }

  .itemDomaines img {
    position: relative;
    z-index: 3;
    border-radius: 0.4em 0.4em 0 0;
    top:0;
    width:100%;
    height:auto;
  }

  .contenu {
    position: absolute;
    z-index: 4;
    /* background-color: salmon; */
    bottom: 0;
    padding:1em;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content:space-evenly;
    text-align: center;
  }

  .titreDomaine {
    color: var(--white-color);
    display: flex;
    justify-content: center;
    padding: 0 0 1em 0;
  }

  .partieDomaines {
    position: relative;
    z-index: 10;
    width:100%;
    /* height:100vh; */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding:0 5em;
    background-color: var(--white-color);
    /* background-image: url("images/pointsGris.png"); */
    /* background-position: left; */
  }

  .partieDomainesCote {
    width:50%;
    height: 100vh;
    background-color: var(--grisFonce-color);
    color : var(--white-color);
  }


  /*---------------------------------------
  PARTIE 02 : PRESENTATION
  -----------------------------------------*/

  .presentationTexte {
    /* background-color: aqua; */
    width:80%;
    padding:0 6em;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top:5em;
    /* justify-content: center; */
  }

  .presentationPhoto {
    width:auto;
    /* height:auto; */
    display: flex;
    justify-content: center;
  }

  /* .presentationPhoto p {
    position: relative;
    z-index: 10;
    color:var(--grisFonce-color);
    padding-bottom:1em;

  } */

  .cadreBlanc {
    position: absolute;
    z-index : 2;
    background-color: var(--white-color);
    width: 40%;
    min-height:90vh;
    transform: rotate(4deg);
    /* margin-top: -5em; */
    border-radius: 0.5em;
    top:2em;
    }

  .photoLP {
    position: relative;
    z-index : 10;
    width:60%;
    transform: rotate(-3deg);
    padding-top: 5em;
  }

  .photoLP img {
    width:100%;
    border-radius: 0.4em;
  }

  .maskPhoto {
    -webkit-mask-image: url(images/mask.png);
    mask-image: url(images/mask.png);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    /* mask-position: bottom left; */
    mask-size: cover;
}

  .maskPhoto img {
    position: relative;
    /* transform: translateX(-20%); */
  }

    /*---------------------------------------
  PARTIE 03 : CONTACT
  -----------------------------------------*/

  .photoFond {
    position: fixed;
    z-index: -2;
    /* bottom: 0; */
    bottom :0;
    /* height:var(--sixCent); */
    background-image: url("images/fond_decor.png");
    background-size: cover;
    background-position: center bottom;
    /* height: 100vh; */
    height: auto;
    width : 100%;
    min-height: 100vh;
    /* min-width: 1920px; */
  }

  .noirOpaque {
    position: relative;
    z-index: 0;
    height: auto;
    width : 100%;
    min-height: 100vh;
    background-color: var(--black-color);
    /* background-image: url("images/pointsGrisClairs.png"); */
    /* background-position: right; */
    background-size: cover;
    opacity:0.5;
  }

  .intermediaireContenu {
    position: fixed;
    z-index: 10;
    /* background-color: aquamarine; */
    display: flex;
    height: auto;
    width : 100%;
    min-height: 100vh;
    color:var(--white-color);
    padding: 4em;
    padding-bottom: 15%;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    opacity:1;
  }

 /*---------------------------------------
  PARTIE 04 : ACTUALITE
  -----------------------------------------*/

  .actualitePart {
    background-position: right bottom;
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    text-align: center;
    height: 900px;
  }

  .actualites {
    /* background-color: aqua; */
    display:flex;
    justify-content: center;
    align-items: center;
  }

    .itemActualite {
    position: relative;
    background-color: var(--white-color);
    color : var(--grisFonce-color);
    width:30%;
    /* height : 500px; */
    margin:1em 0.2em;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 0.4em;
    box-shadow: 2px 2px 5px #303030;
  }

    .itemActualite img {
    position: relative;
    border-radius: 0.4em 0.4em 0 0;
    top:0;
    width:100%;
  }

  /*---------------------------------------
  FOOTER
  -----------------------------------------*/

  footer {
    position: fixed;
    width:100vw;
    left: 0;
    bottom:0;
    z-index: 4;
    /* background-color: var(--black-color); */
    color: var(--white-color);
    padding:0.5em;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }

  .footer {
    background-color: rgba(0,0,0,0.5);
  }

  footer hr {
    width:50%;
    margin:1em 0;
  }

  .sectionFooter {
    position: relative;
    /* background-color: aqua; */
    width:100%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
  }

  .sectionFooter a {
    color:var(--white-color);
    text-decoration: none;
  }

  .reseauxSociaux {
    display: flex;
    justify-content: center;
  }

  .reseauxSociaux a {
    width : 40px;
  }

  .logoFooter {
    width : 40px;
  }

  .logoFooter img {
    width : 100%;
  }

  .sectionFooterSuite .btnSuite img {
    width:40px;
    height:40px;
    margin:0.5em 0;
  }

  .sectionFooterSuite .btnSuite img:hover {
    transform: scale(1.1);
    cursor: pointer;
   }

  a.logoRs img {
    width:40px;
    transition: all 0.2 ease-in-out;
    padding: 0 0.2em;
  }

  a.logoRs img:hover {
      transform: scale(1.1);
      cursor: pointer;
  }

  .sectionFooterContact {
    display: none;
    transition: all 0.2 ease-in-out;
  }
  .sectionFooterContact.active {

    display: flex;
    padding:1em 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }