/*==========================================================  
   
    DIGITAL LOVE & WEB DEVELOPPEMENT - ALL MADE WITH HEART BY BAUDSTUDIO <3 

                      -> -> ->  www.baudstudio.fr  <- <- <-

 ____    _____           ____            ___   ________          ____         ____
|    \  |     | |     | |    \          /   \      |    |     | |    \   |   /    \
|     | |     | |     | |     \        /     \     |    |     | |     \  |  /      \
|____/  |_____| |     | |      \       \____       |    |     | |      \ | /        \
|    \  |     | |     | |      /            \      |    |     | |      / | \        /
|     | |     | |     | |     /              \     |    |     | |     /  |  \      /
|___ /  |     | |_____| |____/         \_____/     |    |_____| | ___/   |   \____/


                    UN PROJET DIGITAL ? CONTACTEZ-NOUS !
                           contact@baudstudio.fr


============================================================*/
/*===========================================================
    CSS INDEX
    ===================
	[ 1. General ]
	[ 2. Typo ]
	[ 3. Global Class ]
	[ 4. Home Version's ]
	[ 5. Pages ]
	[ 6. Loding Bar ]
	[ 7. Scroll ]
  [ 8. Autres ]
==============================================================*/

/* 
[ 1. General Code ]
================ */

/* @font-face {
    font-family: m-design-font;
    src: url(../fonts/m-design-font.ttf) format('truetype')
    font-display: swap;
} */

/* Déclararation des variables de couleurs */
:root {
  --themecolor: #698172;
  --themecoloroverlight: #8a9e97;
  --darkcolor: #193241;

  --bleu: #193241;
  --marron: #b78159;
  --cerise: #a4102f;

  --error: #f44336;

  --light-bg: #f6f9f8;

  /* Couleurs des composants */
  --composant-1: #243c4a;
  --composant-2: #f17d38;
  --composant-3: #ed8fa1;
  --composant-4: #ffbc59;
  --composant-5: #a4102f;
}

.text-gradient {
  background: var(--marron);
}

.text-gradient-light {
  background: #8a9e97;
}

.background-gradient {
  background: #698172;
}

.white-text {
  color: #ffffff;
}

/* Fin déclaration des couleurs */

body {
  font-family: "Poppins", sans-serif;
  font-size: 0.9em;
  line-height: 22px;
  font-weight: 400;
  color: var(--bleu);
  background-color: #ffffff;
  overflow-x: hidden;
}

html,
body {
  width: 100%;
  height: 100%;
}
/* ::-moz-selection {
  background: #cccccc;
  text-shadow: none;
  color: #000000;
} */
::selection {
  background: #cccccc;
  text-shadow: none;
  color: #000000;
}
/* .browserupgrade {
  margin: 0.2em 0;
  background: #cccccc;
  color: #000000;
  padding: 0.2em 0;
} */
img {
  max-width: 100%;
}
.fix {
  overflow: hidden;
}
/* .col-text-center {
  float: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
} */
.clear {
  clear: both;
}

.inline-flex {
  display: inline-flex;
}

.flex {
  display: flex;
}

.block {
  display: block;
}

.auto {
  margin: auto;
}

.flex-auto {
  display: flex;
  margin: auto;
}

.none {
  display: none;
}

.width100 {
  width: 100%;
}

.flex-end {
  justify-content: flex-end;
}

.space-around {
  justify-content: space-around;
}

.space-between {
  justify-content: space-between;
}

.justify-end {
  justify-content: end;
}

.align-center {
  align-items: center;
}

.flex-wrap {
  flex-wrap: wrap;
}

/* Link style
============== */
a {
  color: #2c3336;
  font-weight: 400;
  line-height: 1;
}
a,
a > * {
  cursor: pointer;
  text-decoration: none;
}
a:focus,
a:hover {
  color: var(--marron);
  text-decoration: none;
}

a {
  color: #2c3336;
}

/* Transition
=============== */

a h2,
a h3,
a h4,
a h5,
a,
.navbar a,
.form-control {
  transition: all 0.3s ease;
}

@media screen and (max-width: 767px) {
  .dontShowOnSmallScreens {
    display: none;
  }
}

/* 
[ 2. Typography ]
==========================*/

p {
  color: var(--bleu);
  line-height: 26px;
  font-weight: 400;
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
.mainmenu li a {
  font-weight: 500;
  color: var(--bleu);
  margin: 0 0 10px;
}
h1 {
  font-size: 4em;
  font-weight: 900;
}
h2 {
  font-size: 2rem;
  font-weight: 600;
}
h3 {
  font-size: 22px;
  font-weight: 800;
}
h4 {
  font-size: 18px;
  font-weight: 700;
}
h5 {
  font-size: 15px;
  font-weight: 400;
}
h6 {
  font-size: 13px;
}

.strong {
  font-weight: bold;
}

/* 
[ 3. Global Classes ]
====================================== */
.title-32-px {
  font-size: 32px;
}

.align-center {
  text-align: center;
  margin: auto;
}

.align-left {
  text-align: left;
}

.no-margin {
  margin: 0;
}

.margin-top-moins3pourcent {
  margin-top: -3%;
}

.no-gutter > [class*="col-"] {
  padding-right: 0;
  padding-left: 0;
}
.no-padding {
  padding: 0;
}
.section-ptb {
  padding-top: 100px;
  padding-bottom: 100px;
}
.section-pt {
  padding-top: 80px;
}
.section-pb {
  padding-bottom: 80px;
}

.dark-coor-text {
  color: var(--darkcolor);
}

/*[ 3. Specific Classes ]
====================================== */
.service-title {
  margin: 22px 0 15px;
}

.home_design {
  font-family: acier-bat-gris, sans-serif;
  font-weight: 400;
  font-style: normal;
  color: var(--bleu);
  font-size: 8rem;
}

.home_baudstudio {
  font-family: abadi-condensed, sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--bleu);
  margin-bottom: 45px;
}

@media screen and (max-width: 960px) {
  .home_design {
    font-size: 4rem;
  }

  .home_baudstudio {
    font-size: 1.2rem;
    margin-bottom: 25px;
  }
}

.home {
  font-family: abadi-condensed, sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 18px;
}

.img-width {
  width: 200px;
}

.up-on-hover:hover {
  margin-top: -20px;
  transition-property: margin-top;
  transition-duration: 0.2s;
}

.nom-logiciel {
  color: var(--bleu);
  margin-top: 10px;
}

.progress-bar-html {
  background-color: var(--composant-5);
}

.progress-bar-css {
  background-color: var(--composant-5);
}

.progress-bar-js {
  background-color: var(--composant-2);
}

.progress-bar-jquery {
  background-color: var(--composant-2);
}

.progress-bar-ajax {
  background-color: var(--composant-4);
}

.progress-bar-angular {
  background-color: var(--composant-3);
}

.progress-bar-mysql {
  background-color: var(--composant-2);
}

.progress-bar-php {
  background-color: var(--composant-4);
}

.progress-bar-symfony {
  background-color: var(--composant-3);
}

.puce {
  list-style: disc;
}

/* Section de mise en avant */
.grid {
  display: grid;
}

.cinquante-cinquante {
  grid-template-columns: 50% 50%;
}

.dernier-blog {
  background-color: #efefef;
  height: 250px;
  border-radius: 10px 0px 0px 10px;
  padding: 50px;
}

.coup-de-coeur {
  background-color: var(--marron);
  height: 250px;
  border-radius: 0px 10px 10px 0px;
  padding: 50px;
}

.message {
  color: var(--bleu);
  font-weight: 700;
  padding: 15px;
}
/* Fin section de mise en avant */

/* Section design */

#design {
  background-color: #efefef;
}

/* Fin section design */

/* CTA */

.calltoaction {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.demarrer {
  font-size: 36px;
  font-weight: 600;
  line-height: initial;
  color: #ffffff;
}

/* Fin CTA */

/* Portfolio Details Start */

.maquette {
  width: 65%;
}

.maquette img {
  box-shadow: 2px 12px 30px #d1d1d1;
}

q {
  font-size: 1.2rem;
  font-style: italic;
  line-height: 1.6rem;
}

.q-title {
  font-weight: 800;
}

.light-italic {
  font-style: italic;
  font-weight: 200;
}

/* Portfolio Details End */

/* Placement des composants */

.composant-7 {
  position: absolute;
  right: 10%;
  bottom: 20%;
}

.composant-12 {
  position: absolute;
  right: 10%;
  bottom: 20%;
}

.composant-1 {
  position: absolute;
  left: 18%;
  top: 20%;
  z-index: 0;
}

.composant-6 {
  position: absolute;
  left: -14%;
  bottom: -30%;
  z-index: 0;
}

.composant-9 {
  position: absolute;
  right: 5%;
  bottom: -50%;
}

.composant-2 {
  position: absolute;
  left: 0%;
  top: -15%;
}

.composant-3 {
  position: absolute;
  right: 5%;
  bottom: 31%;
}

.composant-formation {
  position: absolute;
  right: -14%;
  top: 0%;
  z-index: 0;
}

/* Backoffice */

/* Liste des projects */
.project-card {
  border: 1px solid #d8d8d8;
  border-radius: 10px;
  width: 30%;
  margin: 16px;
}

/* Tablette & Mobile Screen Support */
@media screen and (max-width: 1024px) {
  .project-card {
    width: 45%;
  }
}

@media screen and (max-width: 480px) {
  .project-card {
    width: 100%;
  }
}
/*************************************/

/*************************************/
/*Edit / Ajout d'un projet*/

.form {
  background-color: #fafafa;
  padding: 25px 25px;
  border-radius: 25px;
}

/* Fin backoffice */
/*************************************/

/*************************************/
/* Page Formation */

.bloc-formation {
  background-color: #efefef;
  border-radius: 10px 0px 0px 10px;
  padding: 50px;
}
/* Fin page formation */
/*************************************/

/* Screen Support */
@media screen and (max-width: 960px) {
  .hideSmallMediumScreen {
    display: none;
  }
}

@media screen and (max-width: 960px) {
  .section-ptb {
    padding-top: 50px;
    padding-bottom: 50px;
  }
  .section-pt {
    padding-top: 50px;
  }
  .section-pb {
    padding-bottom: 50px;
  }
}
.theme-color {
  color: var(--themecolor);
}

.theme-color-over-light {
  color: var(--themecoloroverlight);
}

.relative {
  position: relative;
}

/* percentage
--------------*/
.percent-20 {
  width: 20%;
}
.percent-25 {
  width: 25%;
}
.percent-30 {
  width: 30%;
}
.percent-33 {
  width: 33.333%;
}
.percent-50 {
  width: 50%;
}
.percent-66 {
  width: 66.666%;
}
.percent-100 {
  width: 100%;
}
.height-100 {
  height: 100%;
}
/* Screen Support */
@media screen and (max-width: 767px) {
  .percent-25,
  .percent-33,
  .percent-50,
  .percent-66 {
    width: 100%;
  }
}

/*margin top bottom
-------------*/
.mtb-10 {
  margin-top: 10px;
  margin-bottom: 10px;
}

.mtb-25 {
  margin-top: 25px;
  margin-bottom: 25px;
}

.mtb-60 {
  margin-top: 60px;
  margin-bottom: 60px;
}
/* Screen Support */

@media screen and (max-width: 767px) {
  .mtb-60 {
    margin-top: 40px;
    margin-bottom: 40px;
  }
}
/*margin top
-------------*/

.mt-10 {
  margin-top: 10px;
}
.mt-15 {
  margin-top: 15px;
}
.mt-20 {
  margin-top: 20px;
}
.mt-25 {
  margin-top: 25px;
}
.mt-30 {
  margin-top: 30px;
}
.mt-40 {
  margin-top: 40px;
}
.mt-50 {
  margin-top: 50px;
}
.mt-60 {
  margin-top: 60px;
}
.mt-80 {
  margin-top: 80px;
}

.mt-100 {
  margin-top: 100px;
}

.mt-145 {
  margin-top: 145px;
}
/* Screen Support */

@media screen and (max-width: 767px) {
  .mt-145 {
    margin-top: 0;
  }
}
/*margin bottom
----------------*/

.mb-3 {
  margin-bottom: 3px;
}
.mb-5 {
  margin-bottom: 5px;
}
.mb-10 {
  margin-bottom: 10px;
}
.mb-15 {
  margin-bottom: 15px;
}
.mb-20 {
  margin-bottom: 20px;
}
.mb-25 {
  margin-bottom: 25px;
}
.mb-30 {
  margin-bottom: 30px;
}
.mb-35 {
  margin-bottom: 35px;
}
.mb-40 {
  margin-bottom: 40px;
}
.mb-45 {
  margin-bottom: 45px;
}
.mb-50 {
  margin-bottom: 50px;
}

.mb-60 {
  margin-bottom: 60px;
}
.mb-65 {
  margin-bottom: 65px;
}
.mb-70 {
  margin-bottom: 70px;
}
.mb-80 {
  margin-bottom: 80px;
}
.mb-100 {
  margin-bottom: 100px;
}
/* Screen Support */
@media screen and (max-width: 767px) {
  .mb-60 {
    margin-bottom: 30px;
  }
}

/*margin left
--------------*/

/* Screen Support */
@media screen and (max-width: 767px) {
}

/*margin right
--------------*/
.mr-10 {
  margin-right: 10px;
}
.mr-20 {
  margin-right: 20px;
}
.mr-40 {
  margin-right: 40px;
}
.mr-100 {
  margin-right: 100px;
}

/* Screen Support */
@media screen and (max-width: 767px) {
}
/*padding-top
--------------*/

.pt-25 {
  padding-top: 25px;
}
.pt-30 {
  padding-top: 30px;
}
.pt-40 {
  padding-top: 40px;
}
.pt-50 {
  padding-top: 50px;
}

.pt-80 {
  padding-top: 80px;
}
.pt-90 {
  padding-top: 90px;
}
.pt-100 {
  padding-top: 100px;
}
.pt-120 {
  padding-top: 120px;
}
.pt-130 {
  padding-top: 130px;
}
.pt-140 {
  padding-top: 140px;
}
.pt-190 {
  padding-top: 190px;
}
.pt-200 {
  padding-top: 200px;
}
/* Screen Support */

@media screen and (max-width: 767px) {
  .pt-100,
  .pt-190,
  .pt-120 {
    padding-top: 80px;
  }
  .pt-200,
  .pt-140 {
    padding-top: 60px;
  }
  .pt-130 {
    padding-top: 30px;
  }
}

/*padding-bottom
------------------*/
.pb-25 {
  padding-bottom: 25px;
}

.pb-50 {
  padding-bottom: 50px;
}
.pb-80 {
  padding-bottom: 80px;
}
.pb-90 {
  padding-bottom: 90px;
}
.pb-80 {
  padding-bottom: 80px;
}
.pb-120 {
  padding-bottom: 120px;
}
.pb-155 {
  padding-bottom: 155px;
}
.pb-205 {
  padding-bottom: 205px;
}
.pb-250 {
  padding-bottom: 250px;
}
/* Screen Support */

@media screen and (max-width: 767px) {
  .pb-120 {
    padding-bottom: 80px;
  }
  .pb-90 {
    padding-bottom: 30px;
  }
  .pb-205,
  .pb-155 {
    padding-bottom: 60px;
  }
  .pb-250 {
    padding-bottom: 65px;
  }
}

/*padding top bottom
---------------------*/

.ptb-15 {
  padding-top: 15px;
  padding-bottom: 15px;
}
.ptb-20 {
  padding-top: 20px;
  padding-bottom: 20px;
}
.ptb-30 {
  padding-top: 30px;
  padding-bottom: 30px;
}
.ptb-35 {
  padding-top: 35px;
  padding-bottom: 35px;
}
.ptb-40 {
  padding-top: 40px;
  padding-bottom: 40px;
}
.ptb-75 {
  padding-top: 75px;
  padding-bottom: 75px;
}
.ptb-100 {
  padding-top: 100px;
  padding-bottom: 100px;
}
.ptb-110 {
  padding-top: 110px;
  padding-bottom: 110px;
}
.ptb-155 {
  padding-top: 155px;
  padding-bottom: 155px;
}
.ptb-220 {
  padding-top: 220px;
  padding-bottom: 220px;
}
.ptb-250 {
  padding-top: 250px;
  padding-bottom: 235px;
}
.ptb-275 {
  padding-top: 275px;
  padding-bottom: 275px;
}
/* Screen Support */

@media screen and (max-width: 767px) {
  .ptb-110,
  .ptb-100 {
    padding-top: 80px;
    padding-bottom: 80px;
  }
  .ptb-220,
  .ptb-155,
  .ptb-275,
  .ptb-250 {
    padding-top: 100px;
    padding-bottom: 100px;
  }
}
/* Padding left
-------------------- */

.pl-20 {
  padding-left: 20px;
}
.pl-30 {
  padding-left: 30px;
}
.pl-40 {
  padding-left: 40px;
}
.pl-50 {
  padding-left: 50px;
}
/* Screen Support */

@media screen and (max-width: 767px) {
  .pl-40,
  .pl-30 {
    padding-left: 15px;
  }
  .pl-50 {
    padding-left: 30px;
  }
}
/* Padding right
-------------------- */
.pr-20 {
  padding-right: 20px;
}
/* Screen Support */
@media screen and (max-width: 767px) {
  .pr-20 {
    padding-right: 0px;
  }
}

/* Padding  Left Right
-------------------- */

.plr-15 {
  padding-left: 15px;
  padding-right: 15px;
}
.plr-35 {
  padding-left: 35px;
  padding-right: 35px;
}
.plr-40 {
  padding-left: 40px;
  padding-right: 40px;
}
.plr-50 {
  padding-left: 50px;
  padding-right: 50px;
}
.plr-60 {
  padding-left: 60px;
  padding-right: 60px;
}

.plr-100 {
  padding-left: 100px;
  padding-right: 100px;
}

/* Screen Support */
@media screen and (max-width: 767px) {
  .plr-50,
  .plr-35,
  .plr-40 {
    padding-left: 15px;
    padding-right: 15px;
  }
  .plr-60 {
    padding-left: 0px;
    padding-right: 0px;
  }

  .plr-100 {
    padding-left: 1px;
    padding-right: 1px;
  }
}

/* background color 
===============================*/
.theme-bg {
  background: var(--bleu);
}

.theme-second-bg {
  background: var(--marron);
}

.white-bg {
  background-color: #ffffff;
}
.black-bg {
  background-color: var(--bleu);
}
.sombre-bg {
  background-color: var(--bleu);
  opacity: 0.95;
}
.drak-bg {
  background-color: var(--bleu);
}

.dark-bg {
  background-color: var(--bleu);
}

.light-bg {
  background-color: var(--light-bg);
}
.bg-color-1 {
  background-color: var(--bleu);
  opacity: 85%;
  border-radius: 10px;
}
.bg-color-2 {
  background-color: #f7f7f7;
}
.bg-color-3 {
  background-color: #f5f5f5;
}

/*Verticle Aligne Middle au hover sur les projets (portfolio list) 
--------------------------*/
.d-table {
  display: table;
  width: 100%;
  height: 100%;
}
.d-table-cell {
  display: table-cell;
  vertical-align: middle;
}
.v-align {
  align-items: center;
  display: flex;
  justify-content: center;
}
/* .row-eq-height {
  display: flex;
} */

/* Default Button Style
------------------------ */
.btn {
  background-color: var(--bleu);
  border-radius: 50px;
  font-size: 14px;
  height: 46px;
  line-height: 45px;
  padding: 0 25px;
  font-weight: 700;
  letter-spacing: 0.4px;
  transition: all 0.3s ease 0s;
  color: #ffffff;
  text-align: center;
  margin: 25px 0;
}

.btn-light {
  border: 1px solid #ffffff;
}

.btn-second {
  background-color: var(--marron);
}

.btn.focus,
.btn:focus,
.btn:hover {
  color: #ffffff;
  background-color: var(--marron);
}

.btn-second:hover {
  color: var(--marron);
  background-color: #ffffff;
}

.lg-btn {
  padding: 0 50px;
}
.btn i.material-icons {
  font-size: 18px;
}

.btn.theme-btn {
  background: #698172;
  border: none;
  font-size: 14px;
  height: 50px;
  line-height: 50px;
  padding: 0 40px;
  font-weight: 700;
  letter-spacing: 0.4px;
}

@media screen and (max-width: 767px) {
  .btn.theme-btn {
    font-size: 12px;
    width: 100%;
  }
}

.btn.theme-btn:hover {
  box-shadow: 0px 12px 20px 0px rgba(24, 44, 51, 0.2);
  color: #ffffff;
}

/* Customize Form style
======================== */
label {
  font-weight: 300;
}
.form-control {
  border-radius: 0;
}
.input-field {
  margin-top: 45px;
}
.input-field label {
  color: #999;
  top: 0;
  left: 0;
  font-size: 14px;
  line-height: 16px;
  font-weight: 400;
  margin: 0;
}
.input-field label.active {
  font-size: 12px;
}

.bo-input {
  display: flex;
  flex-direction: column;
  width: fit-content;
  margin-right: 1rem;
}

.input-large-width {
  width: 280px;
}

.input-small-width {
  width: 100px;
}

/* CSS Customization
============================== */
ul,
ul li {
  list-style: outside none none;
  margin: 0;
  padding: 0;
  color: var(--bleu);
}
nav {
  background-color: transparent;
}
nav ul,
nav ul li {
  float: none;
}
nav ul li:hover,
nav ul li.active {
  background-color: transparent;
}
nav ul a {
  font-size: inherit;
}

.navbar-brand > img {
  width: 65%;
}

.navbar-collapse {
  flex-grow: inherit;
}

.navbar-expand-lg .navbar-nav .nav-link {
  padding-right: 0.8rem;
  padding-left: 0.8rem;
}

@media only screen and (min-width: 1200px) {
  .container {
    width: 1200px;
  }
}
/* @media only screen and (min-width: 601px) {
  .container {
    width: 90%;
  }
}
@media only screen and (max-width: 600px) {
  .container {
    width: 90%;
  }
} */
.container .row {
  margin-right: -15px;
  margin-left: -15px;
}
.row .col {
  padding-right: 15px;
  padding-left: 15px;
}
sub {
  bottom: 0;
}

/* Section Title */
.section-title {
  display: inline-block;
}
.section-title h2 {
  color: var(--darkcolor);
  font-size: 32px;
}
.section-title p {
  color: #0e252d;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
}
.section-title.white h2 {
  color: #ffffff;
}
.section-title.white p {
  color: #ffffff;
}
.section-title.style2 p {
  color: #6b6b6b;
  font-weight: 400;
  line-height: 30px;
}
.section-title.style2 h2 {
  font-size: 30px;
  font-weight: 600;
}

/* Horizontal Line */

#hr1 {
  width: 30%;
  border-top: 1px solid #0e252d;
}

.hr2 {
  color: #cccccc;
  width: 85%;
  display: flex;
  margin: auto;
}

.hr3 {
  color: #cccccc;
  width: 3px;
  height: 100%;
  display: flex;
  margin: auto;
}

.white-hr {
  border-top: 1px solid #ffffff;
}

.horizontal-line hr {
  border-color: #232323;
  border-width: 2px;
  margin: 0;
}
.white .horizontal-line hr {
  border-color: #ffffff;
}
.horizontal-line hr.top {
  width: 85px;
}
.horizontal-line hr.bottom {
  margin-top: 3px;
  width: 50px;
}
.horizontal-line.center hr {
  margin-left: auto;
  margin-right: auto;
}

.hr_contact {
  width: 20%;
  margin-left: 2%;
}

.hr_type_1 {
  width: 10%;
  margin-left: 0;
}

.hr_type_2 {
  width: 20%;
  margin: auto;
  margin-top: 15px;
}

.hr_type_3 {
  width: 100%;
  margin-left: 0;
}

hr.line {
  background: #ffffff none repeat scroll 0 0;
  border: 0 none;
  height: 1px;
  margin: 0 auto;
  width: 40px;
}
.divider hr.line {
  background-color: #4d4d4d;
  width: 100%;
}

/* Custom Input formulaire
----------------------*/

.custom-select {
  position: relative;
}
.custom-input input,
.custom-input textarea,
.custom-select select {
  background-color: transparent;
  border: 1px solid var(--bleu);
  border-radius: 0;
  box-shadow: none;
  margin-bottom: 20px;
  padding: 0 20px 0 20px;
  color: var(--bleu);
  line-height: 40px;
  font-size: 14px;
}

/* ********************** */
/* Bouton spécial DELETE */

.custom-input > .delete-btn {
  color: var(--error);
  border: 1px solid var(--error);
}

.custom-input > .delete-btn:hover {
  color: #ffffff;
  border: 1px solid #ffffff;
  background-color: var(--error);
}
/* Fin de mise en forme de bouton spécial DELETE */
/* ********************************************* */

/* Horizontal Line 
-------------------*/
hr.devider,
hr.line {
  background: #b6b6b6 none repeat scroll 0 0;
  border: 0 none;
  height: 1px;
  margin: 0 auto;
  width: 100%;
}
hr.devider {
  background-color: #e5e5e5;
}
.horizontal-line div {
  background: #727272 none repeat scroll 0 0;
  height: 1px;
  margin: 0;
  width: 70px;
}
.horizontal-line div.top {
  margin-bottom: 4px;
  width: 180px;
}
.center .horizontal-line div {
  margin: 0 auto;
}
.center .horizontal-line div.top {
  margin-bottom: 4px;
}

.portfolio-menu.hover-1 li.active::after,
.portfolio-menu.hover-1 li:hover:after,
.menu-hover-1 li:hover a:after,
.mainmenu.menu-hover-1 li a.active::after {
  width: 36px;
}

/* Dropdown Menu */
.mainmenu .sub-menu,
.mainmenu .navigation > li > ul {
  position: absolute;
  width: 150px;
  z-index: 100;
  background: #222222;
  visibility: hidden;
  opacity: 0;
  transition: all 400ms ease;
}
.mainmenu .navigation > li > ul {
  left: 0px;
  top: 100%;
}
.mainmenu .navigation > li:hover > ul {
  opacity: 1;
  visibility: visible;
}
.mainmenu .navigation > li > ul li {
  border-bottom: 1px solid rgba(51, 51, 51, 0.5);
  float: none;
  position: relative;
  width: 100%;
  padding: 0;
  margin: 0;
}
.mainmenu .navigation > li > ul li a {
  color: rgba(255, 255, 255, 0.7);
  display: block;
  padding: 12px 20px;
  text-align: left;
  font-size: 11px;
  line-height: 1;
}
.header-style-1 .mainmenu .navigation > li > ul li a {
  line-height: 1;
}
.mainmenu .navigation > li > ul > li:hover > a,
.mainmenu .navigation > li > ul > li a.active,
.mainmenu .navigation > li > ul ul li:hover a {
  color: #ffffff;
  background: rgba(51, 51, 51, 0.5) none repeat scroll 0 0;
}

/* Sub Menu */
.dropdown ul a i {
  font-size: 15px;
  position: relative;
  padding-left: 2px;
  float: right;
  top: -2px;
}
.mainmenu .sub-menu {
  left: 100%;
  top: 10px;
}
.mainmenu .dropdown li:hover .sub-menu {
  opacity: 1;
  top: 0;
  left: 100%;
  visibility: visible;
}


/* Burger Menu */

.nav {
  display: flex;
}

.nav ul {
  display: flex;
  list-style: none;
  align-self: end;
  margin: 0;
  padding: 0;
}

.nav li {
  margin-right: 20px;
}

.nav a {
  text-decoration: none;
  color: var(--bleu);
  font-weight: bold;
}

.burger-menu {
  font-size: 1.5em;
  cursor: pointer;
  display: none; /* Caché par défaut sur les écrans larges */
}

/* Styles pour les petits écrans (mobile) */
@media screen and (max-width: 768px) {
  header {
    background-color: var(--light-bg);
  }

  .nav ul {
    display: block;
  }

  .nav ul li {
    text-align: end;
  }

  .nav {
    display: none; /* Caché par défaut sur les écrans étroits */
    flex-direction: row;
    position: absolute;
    left: 0;
    top: 70px;
    width: 100%;
    background-color: var(--light-bg);
  }

  .nav.show {
    display: block;
  }

  .showNav {
    display: flex;
  }

  .nav li {
    margin: 0;
    text-align: center;
  }

  .burger-menu {
    display: block; /* Visible sur les écrans étroits */
  }
}

/* Fin de test burger menu */

/* Mobile Menu
--------------*/
.navbar-toggle .icon-bar {
  background: var(--bleu);
}
.navbar-collapse {
  border-top: 0;
  box-shadow: none;
  padding-left: 0;
  padding-right: 0;
}
.mainmenu .navbar-collapse > ul li.dropdown .dropdown-btn {
  border-radius: 3px;
  cursor: pointer;
  height: 26px;
  position: absolute;
  right: 10px;
  top: 6px;
  width: 30px;
  z-index: 5;
  display: none;
}
.mainmenu .navbar-collapse > ul li.dropdown .dropdown-btn::after {
  content: "\f2f9";
  font-size: 20px;
  height: 100%;
  left: 0;
  line-height: 26px;
  position: absolute;
  text-align: center;
  top: 0;
  width: 100%;
  font-family: "Material-Design-Iconic-Font";
  color: #666666;
}
.mainmenu .navbar-collapse > ul li.dropdown .dropdown-btn.submenu-icon::after {
  content: "\f2fc";
}

/* Small and Tablet Screen Support */
@media (max-width: 767px), (min-width: 768px) and (max-width: 991px) {
  /* Mobile And Tablet Menu 
	------------------------ */
  .mainmenu {
    width: 100%;
  }
  .mainmenu .navbar-collapse {
    height: 300px;
    position: absolute;
    right: 0;
    top: 25px;
    width: 100%;
  }
  .mainmenu .navbar-collapse > ul li.dropdown .dropdown-btn {
    display: block;
  }
  .mainmenu .navigation > li {
    border-bottom: 1px solid #dfdfdf;
  }
  .mainmenu .navigation > li > .dropdown-btn {
    top: 10px;
  }
  .mainmenu .navbar-collapse > .navigation > li ul {
    display: none;
    left: auto !important;
    opacity: 1;
    position: relative;
    right: auto !important;
    top: auto !important;
    transition: none 0s ease 0s !important;
    visibility: visible;
    width: 100%;
  }
  .header-bottom .left,
  .mainmenu .navigation li {
    float: none;
  }
  .navbar-toggle {
    position: absolute;
    right: 35px;
    top: -45px;
  }
  .header-top .navbar-collapse {
    background: #fff none repeat scroll 0 0;
    padding-right: 15px;
    padding-left: 15px;
    box-shadow: 0 1px 4px rgba(2, 3, 3, 0.1);
  }
  .mainmenu .navigation {
    z-index: 999;
    position: relative;
  }
  .header-style-1 .header-top .logo,
  .header-style-1 .header-top .mainmenu li a {
    line-height: 45px;
  }
  .header-style-1 .header-top {
    padding-top: 30px;
  }
  .header-style-1 .header-top.is-sticky {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .header-style-1.box-shadow .header-top {
    padding-bottom: 21px;
    padding-top: 21px;
  }
  .header-style-1.box-shadow .header-top.is-sticky {
    padding-bottom: 10px;
    padding-top: 10px;
  }
  .is-sticky .mainmenu .navbar-collapse {
    top: 13px;
  }
  .menu-hover-1 li a::after {
    top: 100%;
  }
  .mainmenu li:last-child {
    margin-right: 19px;
  }
  .header-four .top-logo {
    display: none;
  }
  .header-space {
    height: 90px;
  }
  .header-style-1 .header-top {
    padding-top: 22px;
  }
  .dropdown ul a i {
    display: none;
  }
}

/* Slick Next Prev 
------------------*/
.slick-arrow {
  background: #515151 none repeat scroll 0 0;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  font-size: 26px;
  height: 48px;
  line-height: 48px;
  margin-top: -24px;
  opacity: 0;
  position: absolute;
  text-align: center;
  top: 50%;
  transition: all 0.3s ease 0s;
  width: 48px;
  z-index: 2;
}
.slick-arrow:hover {
  background: #737373 none repeat scroll 0 0;
}
.slick-arrow.prev {
  left: 0;
}
.slick-arrow.next {
  right: 0;
}
.one-item:hover .slick-arrow.prev {
  left: 20px;
}
.one-item:hover .slick-arrow.next {
  right: 20px;
}
.one-item:hover .slick-arrow {
  opacity: 1;
}

/* slick dots
-------------- */
.slick-dots {
  /* top: 420px; */
  display: inline-block !important;
  left: 50%;
  margin-left: -36px;
  position: absolute;
}

@media screen and (max-width: 480px) {
  .slick-dots {
    /* top: 0px; */
  }
}

.slick-dots > li {
  float: left;
  margin: 0 7.5px;
}
.slick-dots button {
  background: transparent;
  border: 2px solid var(--themecoloroverlight);
  cursor: pointer;
  font-size: 0;
  height: 10px;
  padding: 0;
  transition: all 0.3s ease 0s;
  width: 10px;
  display: block;
  border-radius: 50%;
}
.slick-dots .slick-active button {
  background-color: var(--darkcolor);
}

/* Portfolio menu
---------------*/
.portfolio-menu ul {
  display: inline-block;
}
.portfolio-menu ul li {
  color: var(--darkcolor);
  cursor: pointer;
  float: left;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  margin: 0 12px;
  position: relative;
  text-transform: capitalize;
  transition: all 0.3s ease 0s;
  transform: perspective(1px) translateZ(0px);
}
.portfolio-menu ul li:hover,
.portfolio-menu ul li.active {
  background: var(--marron);
}
.portfolio-menu ul li:first-child {
  margin-left: 0;
}
.portfolio-menu.hover-1 ul li {
  color: #2c2c2c;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  letter-spacing: 0.1px;
  margin: 0 16px;
  text-transform: uppercase;
}
.portfolio-menu.hover-1 li.active::after,
.portfolio-menu.hover-1 li:hover::after {
  width: 21px;
}
.portfolio-menu.hover-1 li::after {
  top: 7px;
  margin-left: -6px;
}

.portfolio_square_img {
  max-width: 460px;
  max-height: 460px;
  display: flex;
  margin: auto;
}

/* MISE EN PLACE - PAGE D ACCUEIL */
/*****************************/

.rs svg {
  color: var(--bleu);
  padding: 20px 0;
}

.rs svg:hover {
  color: var(--marron);
}

.rs .facebook {
  width: 16px;
}

.rs .instagram {
  width: 22px;
}

.rs .linkedin {
  width: 20px;
}

/* END - MISE EN PLACE - PAGE D ACCUEIL */
/*****************************/

/* IMAGES */

#mLogoNav {
  width: 12%;
  padding: 8px;
}

@media screen and (max-width: 960px) {
  #mLogoNav {
    width: 60%;
  }
}

@media screen and (max-width: 480px) {
  #mLogoNav {
    width: 20%;
  }
}

#img22,
#imgtel {
  border-radius: 30px 30px / 30px;
  /*box-shadow: 20px 20px 30px rgba(14, 37, 45, 0.5);*/
  margin-top: 5px;
}

.img-style-1 {
  border-radius: 15px;
}

@media screen and (max-width: 960px) {
  #img2 {
    display: none;
  }

  #imgtel {
    width: 80%;
    margin-left: 10%;
  }
}

@media screen and (max-width: 480px) {
  #img2 {
    margin-left: 10%;
  }
}

@media screen and (max-width: 767px) {
  .slider-one .slider-caption h2,
  .slider-one .slider-caption h1 {
    font-size: 32px;
    line-height: 40px;
  }
  .slider-two .slider-caption h1 {
    font-size: 45px;
    line-height: 50px;
  }
  .slider-two .slider-caption p {
    font-size: 16px;
    line-height: 28px;
  }
  #particles-bg {
    height: 350px;
  }
  #particles-bg .slider-caption {
    top: 10px;
  }
}

/* Portfolio Area */
.portfolio-area .grid-item {
  margin-bottom: 30px;
  padding: 0 15px;
}
.portfolio-area .portfolio-grid {
  margin: 0 -15px -30px;
}

.portfolio-area .project-title h3:hover,
.portfolio-area .project-title h4:hover {
  color: var(--marron);
}
.single-portfolio a img {
  transition: all 0.3s ease 0s;
}
.single-portfolio > a {
  display: block;
  overflow: hidden;
}
.project-title a.venobox {
  display: inline-block;
  height: 32px;
  margin-bottom: 20px;
  width: 32px;
}

/* Portfolio Style Two */
.style-2 .project-title {
  bottom: 0;
  height: calc(100% - 30px);
  left: 0;
  margin: auto;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
  -webkit-transform: scale(1.15);
  -ms-transform: scale(1.15);
  transform: scale(1.15);
  -webkit-transition: all 0.5s ease 0s;
  -o-transition: all 0.5s ease 0s;
  transition: all 0.5s ease 0s;
  width: calc(100% - 60px);
}
.style-2 .single-portfolio:hover .project-title {
  opacity: 1;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}
.style-2 .project-title a i {
  color: #646464;
  display: inline-block;
  font-size: 30px;
  height: 30px;
  margin-bottom: 8px;
  transition: all 0.3s ease 0s;
  width: 30px;
}
.style-2 .project-title a:hover i {
  color: #f55650;
}
/* .style-2.column-4 .project-title a.venobox,
.style-2.column-3 .project-title a.venobox {
  height: 20px;
  margin-bottom: 10px;
  width: 20px;
} */

.style-2.column-3 .project-title {
  height: calc(100% - 40px);
  width: calc(100% - 70px);
}

.style-2.column-2 .project-title {
  height: calc(100% - 60px);
  width: calc(100% - 90px);
}
.style-2.column-2 .project-title h4 {
  font-size: 26px;
}
.style-2.column-2 .project-title p {
  font-size: 18px;
}

/* Portfolio Style Three */
.style-3.portfolio-area .portfolio-grid {
  margin: 0 -15px -50px;
}
.style-3.portfolio-area .grid-item {
  margin-bottom: 50px;
  padding: 0 35px 0 15px;
}
.style-3 .project-title {
  background-color: #ffffff;
  border-right: 2px solid #f55650;
  bottom: 15px;
  margin-left: 20px;
  padding: 20px 0 20px 25px;
  position: absolute;
  transition: all 0.3s ease 0s;
  width: calc(100% - 50px);
  z-index: 2;
}
.style-3 .single-portfolio:hover .project-title {
  border-color: var(--darkcolor);
}
.style-3 .project-title h4 {
  color: #484848;
}
.style-3 .project-title > p {
  color: #646464;
}

.style-3.column-3 .project-title {
  bottom: 20px;
  padding: 23px 0 23px 30px;
}

.style-3.column-2 .project-title {
  bottom: 40px;
  margin-left: 40px;
  padding: 28px 0 28px 35px;
  width: calc(100% - 70px);
}
.style-3.column-2 .project-title h4 {
  color: #3e3e3e;
  font-size: 24px;
}
.style-3.column-2 .project-title > p {
  font-size: 16px;
}
.style-3.column-2 .grid-item {
  padding: 0 55px 0 15px;
}

/* Small and Tablet Screen Support */
@media (max-width: 767px), (min-width: 768px) and (max-width: 991px) {
  .style-3.column-2 .project-title {
    bottom: 20px;
    margin-left: 20px;
    padding: 20px 0 20px 15px;
    width: calc(100% - 50px);
  }
}

/* Footer Section */

.footer {
  position: relative;
  width: 100%;
  bottom: 0;
}

.footer-widget .title h4 {
  font-size: 20px;
  margin: 0;
  color: #ffffff;
}
.footer-widget.about img {
  filter: brightness(1) invert(1);
}
.footer-widget.about > p {
  color: #ebebeb;
  font-size: 16px;
  line-height: 28px;
}
.footer-widget.address span {
  color: #b0b0b0;
  font-weight: 500;
}
.footer-widget.address li {
  color: #fff;
  font-size: 16px;
  font-weight: 300;
  line-height: 28px;
}
.footer-widget.address li a {
  color: #ffffff;
  font-weight: 300;
}
.footer-widget.address li a:hover,
.footer-widget.social-media li a:hover {
  background: var(--marron);
  border-radius: 5px;
  padding: 5px 8px;
  color: #ffffff;
}

.footer-widget a {
  color: #ffffff;
}

.footer-widget a:hover {
  color: var(--marron);
}

.copyright .text > p,
.copyright .text > p a {
  font-weight: 300;
}
.copyright .text > p {
  color: #ffffff;
}

/* Sidebar */
.widget .search form {
  position: relative;
}
.widget .search input {
  border: 0;
  border-bottom: 1px solid #d2d2d2;
  border-radius: 0;
  color: #969696;
  font-size: 13px;
  line-height: 30px;
  padding: 0;
  width: 100%;
}
.widget .search button {
  background: transparent none repeat scroll 0 0;
  border: 0 none;
  height: 32px;
  line-height: 30px;
  padding: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 30px;
}
.widget .search button i {
  color: #848484;
  font-size: 15px;
  transform: rotate(-45deg);
  transition: all 0.3s ease 0s;
}
.search button:hover i {
  color: #f55650;
}

.widget .tags a,
.widget .category li a {
  color: #818181;
}
.widget .posts li a,
.widget .category li a {
  line-height: 28px;
}
.widget .posts li a {
  font-weight: 400;
}
.widget .posts li a i {
  font-size: 16px;
  padding-right: 10px;
  transition: all 0.3s ease 0s;
}
.widget .posts li a:hover i {
  padding-right: 15px;
}

.widget .tags {
  margin-right: -20px;
}
.widget .tags a {
  line-height: 30px;
  margin-right: 20px;
  float: left;
}
/* Small and Tablet Screen Support */
@media (max-width: 767px), (min-width: 768px) and (max-width: 991px) {
  .thumb.pull-left {
    float: none !important;
    margin: 0;
  }
  .sidebar.pl-20 {
    padding: 0;
  }
  .team-area .row.mb-30,
  .service-area .row.mb-30 {
    margin-bottom: 0 !important;
  }
}

/* Service */
.service-box {
  padding: 60px 22px 60px 40px;
  transition: all 0.5s ease 0s;
  border: 1px solid;
}
.service-box:hover {
  background: var(--marron);
}

.service-box:hover h4,
.service-box:hover p,
.service-box:hover i {
  color: #ffffff;
}

.service-box i {
  font-size: 44px;
  color: #ffffff;
}
.service-box h4 {
  font-weight: 600;
  margin: 22px 0 15px;
  color: #ffffff;
}
.service-box p {
  color: #fafafa;
}

/* Portfolio Details
---------------------- */

.style1 .project-image li {
  margin-bottom: 50px;
}
.style1 .project-image li:last-child {
  margin-bottom: 0;
}
.project-details > h2 {
  color: #4c4c4c;
  font-size: 26px;
}
.project-details > p {
  color: #818181;
  line-height: 28px;
}
.project-info {
  width: 325px;
}
.project-info h5 {
  color: #4c4c4c;
  font-weight: 500;
  margin-bottom: 2px;
}
.project-info p {
  color: #818181;
  font-size: 15px;
  font-weight: 300;
}
.project-info li {
  border-bottom: 1px solid #d9d9d9;
  margin-bottom: 16px;
  padding-bottom: 5px;
}
.one-item.project-image {
  cursor: move;
}

/* 404 Page
------------*/
.error-text h2 {
  color: #000000;
  font-weight: 700;
}
.error-text p {
  font-size: 16px;
}
.error-text h1 {
  font-size: 180px;
  margin-bottom: 20px;
  margin-top: 30px;
}
.error-text a {
  color: #000000;
}
.error-text h1,
.error-text a:hover {
  color: #f55650;
}
/* Mobile Screen Support */
@media (max-width: 767px) {
  .error-text h1 {
    font-size: 120px;
  }
}

/* 
[ 6. Back-office ]
===================================*/

form.backoffice label,
.backoffice label {
  width: 100%;
}

form.backoffice input,
.backoffice input {
  width: 250px;
}

.backoffice a {
  color: var(--bleu);
}

.backoffice a:hover {
  color: var(--marron);
}

.backoffice .errMessage {
  color: red;
}

/* 
[ 7. Loding Bar ]
===================================*/
/* #loading-wrap {
     background-color: #ffffff;
     height: 100%;
     position: fixed;
     width: 100%;
     z-index: 100000;
     top: 0;
     left: 0;
 }
 .loading-effect {
     width: 50px;
     height: 50px;
     position: absolute;
     top: 50%;
     left: 50%;
     margin: -25px 0 0 -25px;
     font-size: 10px;
     text-indent: -12345px;
     border-top: 3px solid #cccccc;
     border-right: 3px solid #cccccc;
     border-bottom: 3px solid #cccccc;
     border-left: 3px solid var(--marron);
     border-radius: 50%;
     -webkit-animation: spinner 500ms infinite linear;
     animation: spinner 500ms infinite linear;
     z-index: 100001;
 }
 @-webkit-keyframes spinner {
     0% {
         -webkit-transform: rotate(0deg);
         transform: rotate(0deg);
     }
     100% {
         -webkit-transform: rotate(360deg);
         transform: rotate(360deg);
     }
 }
 @keyframes spinner {
     0% {
         -webkit-transform: rotate(0deg);
         transform: rotate(0deg);
     }
     100% {
         -webkit-transform: rotate(360deg);
         transform: rotate(360deg);
     }
 } */

/* 
[ 6. ScrollTo & ScrollUp ]
===================================*/

/* ScrollTo */

/* $mouse-width: 2.5rem; */

/* .hero {
    position: relative;
    min-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12rem 2rem;
    color: white;
    background: {
        image: linear-gradient(to bottom,  rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%), url('https://source.unsplash.com/random/1920x1080/?sky');
        blend-mode: multiply;
        size: cover;
    }
} */

.scroll {
  animation-name: scroll;
  animation-duration: 1.5s;
  animation-timing-function: cubic-bezier(0.65, -0.55, 0.25, 1.5);
  animation-iteration-count: infinite;
  transform-origin: 50% 20.5px;
  will-change: transform, opacity;
  opacity: 1;
}

.scroll-link {
  position: absolute;
  bottom: 3rem;
  left: 76.8rem;
  transform: translateX(-50%);
}

@keyframes scroll {
  0%,
  20% {
    transform: translateY(0) scaleY(1);
  }

  100% {
    transform: translateY(36px) scaleY(2);
    opacity: 0;
  }
}
/* End ScrollTo */

/* ScrollUp */

#scrollUp {
  background: var(--bleu) none repeat scroll 0 0;
  bottom: 56px;
  height: 35px;
  right: 20px;
  text-align: center;
  width: 30px;
  padding: 5px;
  border: 2px solid var(--bleu);
  border-radius: 50px;
}
#scrollUp i {
  color: #fff;
  font-size: 20px;
  line-height: 35px;
  text-align: center;
}
#scrollUp:hover {
  background: var(--marron);
}