@charset "utf-8";

/* 
color primaire : rouge = #e90c2b  
   secondaire : rouge foncé = #ae0003
   tertiaire : rouge clair = #ff5955

*/
@import url('https://fonts.googleapis.com/css2?family=Advent+Pro:wght@300&family=Comfortaa&family=EB+Garamond&family=Fjalla+One&family=Tenor+Sans&display=swap');

:root {
    --rouge: #e90c2b   ;
    --rougefonce: #ae0003;
    --rougeclair: #ff5955;
    --white: #ffffff;
    --gris: #e1eaee;
    --grisfonce: #3b3663;
    --bleugris: #1c2331;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --dark: #343a40;
    --helloasso: #2a3263;
   
}

* {
    margin: 0;
    padding: 0;
    color: var(--bleugris);
}

body {
    font-family: 'Comfortaa', cursive;
    color: var(--bleugris);
    
}

.colorred {
  color: var(--rouge)!important;
}

.carouselpol .view {
    height: 700px;
    border-radius: 50% / 7%;
}

.header-slide .view {
  position: relative;
  height: 400px;
  border-radius: 50% / 7%;
}

.header-slide h1 {
  margin-top: 30px;
}

h1 {
  font-size: 3.5em;
  font-family: 'Tenor Sans', sans-serif;
  font-weight: bold;
}

h1, 
h2,
h3,
h4,
h5 {
  color: var(--grisfonce);
  font-weight: 800;
  line-height: 1.2;
}

h-55{height:55%!important}

.moinsmargin15 {
  margin-top: -15px;
}


.moinsmargin50 {
  margin-top: -50px;
}

.moinsmargin80 {
  margin-top: -80px;
}

.padding80 {
  padding-top: 100px;
  padding-bottom: 100px;
}

.section-libelle {
  position: relative;
  width: 100%;
  height: auto;
  z-index: -2;
}

.section-container {
  position: relative;
  padding-top: 50px;
  padding-bottom: 50px;
  width: 75%;
  height: auto;
}

.form-newsletter {
  position: relative; 
  width: 90%;
  height: auto;
 }

.section-cart {
  position: relative;
  padding-top: 50px;
  padding-bottom: 50px;
  width: 40%;
  height: auto;
}

.btn-outline-primaire {
  color: #e90c2b !important;
  background-color:var(--white);
  border:2px solid var(--rouge);
  border-radius: 5px;
}

.btn-outline-primaire:hover {
  color:var(--white) !important;
  background-color:var(--rouge);
  border-color:var(--rouge);
}


.btn-outline-rouge {
  color: var(--rouge) !important;
  background-color:transparent !important;
  font-size: 1.3em;
}

.btn-outline-rouge:hover {
  color:var(--rougefonce) !important;
}

.btn-primaire {
  color:#fff;
  background-color:var(--rouge);
  border-color:var(--rouge);
  border-radius: 5px;
}
.btn-primaire:hover{
  color:#fff;
  background-color:var(--rougefonce);
  border-color:var(--rougefonce);
}

.btn-primaire.focus,.btn-primaire:focus{
  color:#fff;
  background-color:var(--rougefonce);;
  border-color:var(--rougefonce);;
  box-shadow:0 0 0 .2rem rgba(38,143,255,.5)
}


h1 {
  font-size: 3.25rem; }
  @media (max-width: 1200px) {
    h1 {
      font-size: calc(2.375rem + 1.5vw) ; } }

h2{
  font-size: 2rem; }
  @media (max-width: 1200px) {
    h2 {
      font-size: calc(1.325rem + 0.9vw) ; } }

h3 {
  font-size: 1.75rem; }
  @media (max-width: 1200px) {
    h3 {
      font-size: calc(1.3rem + 0.6vw) ; } }

h4 {
  font-size: 1.3rem; }
  @media (max-width: 1200px) {
    h4 {
      font-size: calc(1.175rem + 0.3vw) ; } }

i { color: var(--rouge);}

.slogan {
  width: 75%;
}

.coeur {
    position: relative;
    width: 150px;
    height: 140px;
}
  .coeur:before,
  .coeur:after {
    position: absolute;
    content: "";
    left: 75px;
    top: 0;
    width: 75px;
    height: 130px;
    background: red;
    border-radius: 75px 75px 0 0;
    transform: rotate(-45deg);
    transform-origin: 0 100%;
  }
  .coeur:after {
    left: 0;
    transform: rotate(45deg);
    transform-origin: 100% 100%;
  }

      
.mask-black {
  position: relative;
  z-index: 2;
  background-position: center center;
  background-size: cover; 
  background-repeat: no-repeat;
  background-attachment: fixed;
}


.mask-black::after {

    background-color: #020202;
    background: #020202;
    opacity: 0.85;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: ""; 
  }

  
  /*----------------------------LOADER -------------------------------------------*/
.loader img { width: 100%; }

#preloader {
   width: 100%;
   height: 100%;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   z-index: 11000;
   position: fixed;
   display: block;
   display: flex;
   justify-content: center;
   align-items: center;
   background: #fff;
}

.loader {
   display: block;    
   flex-wrap: wrap;
   width: 250px;
   height: auto;
   -webkit-transform-style: preserve-3d;
   transform-style: preserve-3d;
}

.preload i {
  color: var(--rougefonce);
  font-size: 3.6em;
}
.preload .pol {
  position: absolute;
  top: 11px;
  left: 10px;
  font-family: 'EB Garamond', serif;
  color: var(--white);
}
.preload p { color: var(--grisfonce);}

/* -------- SCROLLER PAGE -------- */

.scroll-to-top {
  position: fixed;
  right: 15px;
  bottom: 75px;
  display: none;
  text-align: center;
  line-height: 85px;
  width: 50px;
  height: 50px;
  background-color: var(--bleugris);
  z-index: 90000;
}

.scroll-to-top:focus, .scroll-to-top:hover {
  background-color: var(--rougefonce);
}


.scroll-to-top i {
  font-weight: 800;
}

/*---------------------------------------*/

.bg-oval {
  position: relative;
  width: 100%;
  height: auto;
  padding-top: 70px;
  margin-top: -32px;
  background: #ffffff;
  border-radius: 50% / 10%;
  color: white;
  text-align: center;
  text-indent: .1em;
}
/*
.bg-oval:before {
  content: '';
  position: absolute;
  top: 10%;
  bottom: 10%;
  right: -5%;
  left: -5%;
  background: inherit;
  border-radius: 5% / 50%;
}
*/