@-webkit-keyframes wobble-hor-bottom {
  0%, 100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%
  }

  15% {
    -webkit-transform: translateX(-30px) rotate(-6deg);
    transform: translateX(-30px) rotate(-6deg)
  }

  30% {
    -webkit-transform: translateX(15px) rotate(6deg);
    transform: translateX(15px) rotate(6deg)
  }

  45% {
    -webkit-transform: translateX(-15px) rotate(-3.6deg);
    transform: translateX(-15px) rotate(-3.6deg)
  }

  60% {
    -webkit-transform: translateX(9px) rotate(2.4deg);
    transform: translateX(9px) rotate(2.4deg)
  }

  75% {
    -webkit-transform: translateX(-6px) rotate(-1.2deg);
    transform: translateX(-6px) rotate(-1.2deg)
  }
}

@keyframes wobble-hor-bottom {
  0%, 100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%
  }

  15% {
    -webkit-transform: translateX(-30px) rotate(-6deg);
    transform: translateX(-30px) rotate(-6deg)
  }

  30% {
    -webkit-transform: translateX(15px) rotate(6deg);
    transform: translateX(15px) rotate(6deg)
  }

  45% {
    -webkit-transform: translateX(-15px) rotate(-3.6deg);
    transform: translateX(-15px) rotate(-3.6deg)
  }

  60% {
    -webkit-transform: translateX(9px) rotate(2.4deg);
    transform: translateX(9px) rotate(2.4deg)
  }

  75% {
    -webkit-transform: translateX(-6px) rotate(-1.2deg);
    transform: translateX(-6px) rotate(-1.2deg)
  }
}

@-webkit-keyframes heartbeat {
  from {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
  }

  10% {
    -webkit-transform: scale(.91);
    transform: scale(.91);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
  }

  17% {
    -webkit-transform: scale(.98);
    transform: scale(.98);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
  }

  33% {
    -webkit-transform: scale(.87);
    transform: scale(.87);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
  }

  45% {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
  }
}

@keyframes heartbeat {
  from {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
  }

  10% {
    -webkit-transform: scale(.91);
    transform: scale(.91);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
  }

  17% {
    -webkit-transform: scale(.98);
    transform: scale(.98);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
  }

  33% {
    -webkit-transform: scale(.87);
    transform: scale(.87);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
  }

  45% {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
  }
}

/*-------------------------------------Connexion------------------------------------*/
.connexion {
  border: 2px solid rgb(231, 231, 231);
  border-radius: 2px;
  padding: 19px;
  font-family: monospace;
  background-color: white;
}

.connexion:hover {
  background-color: rgb(252, 252, 252);
}

.connexion input, .connexion select, .connexion textarea {
  margin-left: 12px;
  padding: 10px;
  border-radius: 3px;
  border: 2px solid #c5c5c5;
  outline: none;
}

.connexion input:focus, .connexion select:focus, .connexion textarea:focus {
  margin-left: 12px;
  padding: 10px;
  border-radius: 3px;
  outline: none;
  border: 2px solid #90cdff;
}

.connexion button {
  border: 2px solid rgba(230, 197, 90, 1);
  background-color: #333;
  color: rgba(230, 197, 90, 1);
  padding: 10px;
  border-radius: 38px;
  font-size: 24px;
  font-family: monospace;
}

.connexion button:hover {
  border: 2px solid rgba(230, 197, 90, 1);
  background-color: rgb(34, 34, 34);
  color: rgba(230, 197, 90, 1);
  padding: 10px;
  border-radius: 38px;
  font-size: 24px;
  font-family: monospace;
}

/*-------------------------------------Navbar------------------------------------------*/
.nav {
  background-color: #333;
}

.nav .titre a {
  text-decoration: none;
  color: rgba(230, 197, 90, 1);
  -webkit-animation: roll-in-blurred-left .8s cubic-bezier(.23, 1.000, .32, 1.000) both;
  animation: roll-in-blurred-left .8s cubic-bezier(.23, 1.000, .32, 1.000) both
}

.nav .navbar div, .nav .navbar a {
  text-decoration: none;
  color: #ffffff;
  text-decoration: none;
  font-size: 16px;
  padding-left: 2px;
  border-bottom: 3px solid transparent;
}

.nav .navbar div:hover {
  text-decoration: none;
  color: rgba(230, 197, 90, 1);
  font-size: 16px;
  cursor: pointer;
  padding-left: 2px;
  border-bottom: 3px solid rgba(230, 197, 90, 1);
}

.nav .navbar a:hover {
  text-decoration: none;
  color: rgba(230, 197, 90, 1);
  font-size: 16px;
  padding-left: 2px;
  border-bottom: 3px solid rgba(230, 197, 90, 1);
}

.nav .navbar .bul:hover {
  text-decoration: none;
  color: rgba(230, 197, 90, 1);
  font-size: 16px;
  padding-left: 2px;
  border-bottom: 0px solid rgba(230, 197, 90, 1);
}

.toggle {
  display: none;
}

.nav .navbar div span {
  display: none;
  background-color: #333;
  padding: 0;
  position: absolute;
  margin-top: 3px;
  z-index: 1;
  cursor: pointer;
  border-bottom: 0px solid transparent;
  position: absolute;
}

.nav .navbar div:hover span {
  display: block;
  cursor: pointer;
  background-color: #333;
  padding: 0;
  margin-top: 3px;
  z-index: 1;
  -webkit-animation: slit-in-vertical .2s ease-out both;
  animation: slit-in-vertical .2s ease-out both
}

@-webkit-keyframes tilt-in-fwd-bl {
  0% {
    -webkit-transform: rotateY(-20deg) rotateX(-35deg) translate(-300px, 300px) skew(-35deg, 10deg);
    transform: rotateY(-20deg) rotateX(-35deg) translate(-300px, 300px) skew(-35deg, 10deg);
    opacity: 0
  }

  100% {
    -webkit-transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
    transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
    opacity: 1
  }
}

@keyframes tilt-in-fwd-bl {
  0% {
    -webkit-transform: rotateY(-20deg) rotateX(-35deg) translate(-300px, 300px) skew(-35deg, 10deg);
    transform: rotateY(-20deg) rotateX(-35deg) translate(-300px, 300px) skew(-35deg, 10deg);
    opacity: 0
  }

  100% {
    -webkit-transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
    transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
    opacity: 1
  }
}

@-webkit-keyframes roll-in-blurred-left {
  0% {
    -webkit-transform: translateX(-1000px) rotate(-720deg);
    transform: translateX(-1000px) rotate(-720deg);
    -webkit-filter: blur(50px);
    filter: blur(50px);
    opacity: 0
  }

  100% {
    -webkit-transform: translateX(0) rotate(0deg);
    transform: translateX(0) rotate(0deg);
    -webkit-filter: blur(0);
    filter: blur(0);
    opacity: 1
  }
}

@keyframes roll-in-blurred-left {
  0% {
    -webkit-transform: translateX(-1000px) rotate(-720deg);
    transform: translateX(-1000px) rotate(-720deg);
    -webkit-filter: blur(50px);
    filter: blur(50px);
    opacity: 0
  }

  100% {
    -webkit-transform: translateX(0) rotate(0deg);
    transform: translateX(0) rotate(0deg);
    -webkit-filter: blur(0);
    filter: blur(0);
    opacity: 1
  }
}

@-webkit-keyframes bounce-in-right {
  0% {
    -webkit-transform: translateX(600px);
    transform: translateX(600px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0
  }

  38% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    opacity: 1
  }

  55% {
    -webkit-transform: translateX(68px);
    transform: translateX(68px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
  }

  72% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
  }

  81% {
    -webkit-transform: translateX(32px);
    transform: translateX(32px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
  }

  90% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
  }

  95% {
    -webkit-transform: translateX(8px);
    transform: translateX(8px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
  }
}

@keyframes bounce-in-right {
  0% {
    -webkit-transform: translateX(600px);
    transform: translateX(600px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0
  }

  38% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    opacity: 1
  }

  55% {
    -webkit-transform: translateX(68px);
    transform: translateX(68px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
  }

  72% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
  }

  81% {
    -webkit-transform: translateX(32px);
    transform: translateX(32px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
  }

  90% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
  }

  95% {
    -webkit-transform: translateX(8px);
    transform: translateX(8px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
  }
}

@-webkit-keyframes slide-in-elliptic-bottom-bck {
  0% {
    -webkit-transform: translateY(600px) rotateX(-30deg) scale(6.5);
    transform: translateY(600px) rotateX(-30deg) scale(6.5);
    -webkit-transform-origin: 50% -100%;
    transform-origin: 50% -100%;
    opacity: 0
  }

  100% {
    -webkit-transform: translateY(0) rotateX(0) scale(1);
    transform: translateY(0) rotateX(0) scale(1);
    -webkit-transform-origin: 50% 500px;
    transform-origin: 50% 500px;
    opacity: 1
  }
}

@keyframes slide-in-elliptic-bottom-bck {
  0% {
    -webkit-transform: translateY(600px) rotateX(-30deg) scale(6.5);
    transform: translateY(600px) rotateX(-30deg) scale(6.5);
    -webkit-transform-origin: 50% -100%;
    transform-origin: 50% -100%;
    opacity: 0
  }

  100% {
    -webkit-transform: translateY(0) rotateX(0) scale(1);
    transform: translateY(0) rotateX(0) scale(1);
    -webkit-transform-origin: 50% 500px;
    transform-origin: 50% 500px;
    opacity: 1
  }
}

@-webkit-keyframes slit-in-vertical {
  0% {
    -webkit-transform: translateZ(-800px) rotateY(90deg);
    transform: translateZ(-800px) rotateY(90deg);
    opacity: 0
  }

  54% {
    -webkit-transform: translateZ(-160px) rotateY(87deg);
    transform: translateZ(-160px) rotateY(87deg);
    opacity: 1
  }

  100% {
    -webkit-transform: translateZ(0) rotateY(0);
    transform: translateZ(0) rotateY(0)
  }
}

@keyframes slit-in-vertical {
  0% {
    -webkit-transform: translateZ(-800px) rotateY(90deg);
    transform: translateZ(-800px) rotateY(90deg);
    opacity: 0
  }

  54% {
    -webkit-transform: translateZ(-160px) rotateY(87deg);
    transform: translateZ(-160px) rotateY(87deg);
    opacity: 1
  }

  100% {
    -webkit-transform: translateZ(0) rotateY(0);
    transform: translateZ(0) rotateY(0)
  }
}

span li {
  list-style: none;
  width: 240px;
  border-bottom: 3px solid white;
  padding-left: 8px;
}

span li:hover {
  list-style: none;
  width: 240px;
  border-bottom: 3px solid rgb(177, 177, 177);
  padding-left: 10px;
}

.nav .navbar span li a {
  border: 0;
  background: #333;
  padding-right: 11px;
  width: 100%;
  font-size: 16px;
}

.nav .navbar span li a:hover {
  border: 0;
  background: #333;
  color: rgba(230, 197, 90, 1);
  padding-right: 11px;
  width: 100%;
  font-size: 16px;
  z-index: 1;
}

.slide-in-blurred-top {
  -webkit-animation: slide-in-blurred-top 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
  animation: slide-in-blurred-top 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
}

/**********Media***********/

@media only screen and (max-width: 800px) {

  .nav .navbar span li a {
    border: 0;
    background: #333;
    padding-right: 11px;
    width: 100%;
    font-size: 16px;
  }

  span li:hover {
    list-style: none;
    width: 100%;
    border-bottom: 3px solid rgb(177, 177, 177);
    padding-left: 10px;
  }

  .cont {}

  .titre2 {
    display: none;
  }

  .toggle {
    display: block;
    position: fixed;
    color: rgba(230, 197, 90, 1);
    background: #333;
    font-size: 29px;
    margin-left: 11px;
    z-index: 1;
  }

  .nav .navbar span {
    width: 100%;
    text-align: center;
  }

  .nav .navbar div, .nav .navbar a {
    text-decoration: none;
    color: #ffffff;
    text-decoration: none;
    font-size: 16px;
    padding-left: 2px;
    text-align: center;
    text-align: center;
    width: 100%;
    border-top: 3px solid rgba(230, 197, 90, 1);
  }

  .display {
    display: none;
  }

  span li {
    list-style: none;
    width: 100%;
    border-bottom: 3px solid white;
    padding-left: 8px;
    margin: 0;
    z-index: 1;
    margin-left: 10px;
  }

  .annoncelegale {
    border: 1px solid #b7b7b7;
    border-radius: 1px;
    height: 20vh;
    overflow: hidden;
    display: block;
  }
}

/*-----------------------Index---------------------*/

.backIndex {
  background-image: url("images/x.jpg");
  /*or 70%, or what you want*/
  height: 90vh;
  background-size: 100% 100%;
}

.imgJournaux {
  /* background-color: white;border: 2px solid #cdc34d;/* padding: 0px; */
  /* padding-right: 21px;border-radius: 4px; */
  /* border-bottom: 10px; */
  /* padding-left: 21px;padding-top: 8px;padding-bottom: 8px; */
  background-image: url('images/xx.jpg');
  /*or 70%, or what you want*/
  background-size: 100% 100%;
}

.index input[type="text"], .index input[type="file"], .index textarea {
  display: block;
  width: 500px;
  max-width: 100%;
  font-size: 14px;
  line-height: 25px;
  padding: 4px;
  color: #555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  outline: none;
  resize: none;
  border-radius: 0;
  -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
  box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
  -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
  -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

.index input[type="text"]:focus, .index input[type="file"]:focus, .index textarea:focus {
  display: block;
  width: 500px;
  max-width: 100%;
  font-size: 14px;
  line-height: 25px;
  padding: 4px;
  color: #555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #67a6ff;
  outline: none;
  resize: none;
  border-radius: 0;
  -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
  box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
  -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
  -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

.index button, .Annonce button, .bulltin button {
  display: table;
  font-size: 17px;
  margin: 0 !important;
  border-radius: 0 !important;
  max-width: 100%;
  width: 100%;
  min-width: 100%;
  height: 32px;
  line-height: 0.5em;
  letter-spacing: 0.5px;
  font-family: 'Exo 2';
  font-weight: normal;
  cursor: pointer;
  outline: none !important;
  color: #303030;
  border: 1px solid #303030 !important;
  text-align: center;
  padding: 0px 0px 0px 15px;
  text-transform: capitalize;
  transition: all 300ms ease-in-out;
  -webkit-transition: all 300ms ease-in-out;
  font-weight: 800;
  background-color: rgba(230, 197, 90, 1);
}

.index button:hover, .Annonce button:hover, .bulltin button:hover {
  background: transparent;
  display: table;
  font-size: 17px;
  margin: 0 !important;
  border-radius: 0 !important;
  max-width: 100%;
  width: 100%;
  min-width: 100%;
  height: 32px;
  line-height: 0.5em;
  letter-spacing: 0.5px;
  font-family: 'Exo 2';
  font-weight: normal;
  cursor: pointer;
  outline: none !important;
  color: #303030;
  border: 1px solid #303030 !important;
  text-align: center;
  padding: 0px 0px 0px 15px;
  text-transform: capitalize;
  transition: all 300ms ease-in-out;
  -webkit-transition: all 300ms ease-in-out;
  font-weight: 800;
}

#clear {
  background: transparent;
  display: table;
  font-size: 17px;
  margin: 0 !important;
  border-radius: 0 !important;
  max-width: 100%;
  width: 100%;
  min-width: 100%;
  height: 32px;
  line-height: 0.5em;
  letter-spacing: 0.5px;
  font-family: 'Exo 2';
  font-weight: normal;
  cursor: pointer;
  outline: none !important;
  color: #303030;
  border: 1px solid #303030 !important;
  text-align: center;
  padding: 0px 0px 0px 15px;
  text-transform: capitalize;
  transition: all 300ms ease-in-out;
  -webkit-transition: all 300ms ease-in-out;
  font-weight: 800;
}

.index .contact span {
  color: red;
  font-weight: 600;
}

@-webkit-keyframes focus-in-contract-bck {
  0% {
    letter-spacing: 1em;
    -webkit-transform: translateZ(300px);
    transform: translateZ(300px);
    -webkit-filter: blur(12px);
    filter: blur(12px);
    opacity: 0
  }

  100% {
    -webkit-transform: translateZ(12px);
    transform: translateZ(12px);
    -webkit-filter: blur(0);
    filter: blur(0);
    opacity: 1
  }
}

@keyframes focus-in-contract-bck {
  0% {
    letter-spacing: 1em;
    -webkit-transform: translateZ(300px);
    transform: translateZ(300px);
    -webkit-filter: blur(12px);
    filter: blur(12px);
    opacity: 0
  }

  100% {
    -webkit-transform: translateZ(12px);
    transform: translateZ(12px);
    -webkit-filter: blur(0);
    filter: blur(0);
    opacity: 1
  }
}

.labelContact {
  text-align: right;
  color: #7a7a7a;
  font-weight: 400;
  font-family: monospace;
}

.judis {
  text-shadow: 4px 0px 1px black;

  color: white;
  font-family: cursive;
  font-weight: 600;
  font-size: 30px;
}

@media only screen and (max-width: 800px) {
  .labelContact {
    text-align: left;
    color: #7a7a7a;
    font-weight: 400;
    font-family: monospace;
  }

  .judis {
    color: white;
    font-family: monospace;
    font-weight: 600;
    font-size: 30px;
    text-shadow: 0px 0px 0px black;
  }

  .QUOTIDIENS {
    -webkit-animation: focus-in-contract-bck 0.5s cubic-bezier(.25, .46, .45, .94) both;
    animation: focus-in-contract-bck 0.5s cubic-bezier(.25, .46, .45, .94) both;
    font-size: 40px;
    font-family: monospace;
  }
}

/*-------------------------------Footer-----------------------------------*/

.footer {
  background: #000000;
}

.footer a {
  text-decoration: none;
  padding-left: 10px;
  color: rgba(230, 197, 90, 1);
}

.footer a:hover {
  color: rgb(235, 215, 149);
}

/*----------------------Annonce----------------------*/
.Annonce {
  border: 3px solid #eaeaea;
  border-radius: 2px;
  padding: 20px;
  margin-top: 5px;
  margin-bottom: 5px;
  font-family: 'Droid Sans', Arial, Verdana, sans-serif;
  font-size: 18px;
  font-family: monospace;
}

.Annonce h1 {
  font-family: BebasNeueRegular, arial, Georgia, serif;
  margin-bottom: 10px;
  font-size: 32px;
  padding-bottom: 10px;
  font-weight: 600;
  color: #3e3e3e;
  font-weight: 500;
  border-bottom: 3px solid #f0f0f0;
}

.Annonce h2 {
  color: #585858;
  text-align: center;
}

.Annonce h3 {
  color: #3a3a3a;
}

.Annonce p {
  font-size: 17px;
  font-family: inherit;
}

.Annonce select, .Annonce textarea {
  border-color: #F1F1F1;
  border-top-color: #DDD;
  border-left-color: #DDD;
  background-color: #F9F9F9;
  color: #515151;
  font: 16px Tahoma;
  padding: 8px;
  margin: 3px;
  width: auto;
  margin-bottom: 7px;
  -webkit-border-radius: 3px;
  border-top: 1px solid #d8d8d8;
  border-left: 1px solid #d5d5d5;
  /* border: 1px solid #606060; */
  border-bottom: 1px solid #f1f1f1;
  border-right: 1px solid #e6e6e6;
  border-radius: 3px;
  outline: none;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.Annonce select:focus, .Annonce textarea:focus {
  border-color: #67a6ff;
  ;
  border-top-color: #67a6ff;
  border-left-color: #67a6ff;
  border-top: 1px solid #67a6ff;
  border-left: 1px solid #67a6ff;
  /* border: 1px solid #606060; */
  border-bottom: 1px solid #96c1fd;
  border-right: 1px solid #89b9fc;
  background-color: #F9F9F9;
  color: #515151;
  font: 16px Tahoma;
  padding: 8px;
  margin: 3px;
  width: auto;
  margin-bottom: 7px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  outline: none;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.Annonce textarea {
  width: 90%;
  margin-left: 15px;
}

.Annonce input {
  width: 300px;
  max-width: 90%;
  border-color: #F1F1F1;
  border-top-color: #DDD;
  border-left-color: #DDD;
  background-color: #F9F9F9;
  border-top: 1px solid #d8d8d8;
  border-left: 1px solid #d5d5d5;
  /* border: 1px solid #606060; */
  border-bottom: 1px solid #f1f1f1;
  border-right: 1px solid #e6e6e6;
  color: #515151;
  font: 16px Tahoma;
  padding: 8px;
  margin: 3px;
  margin-bottom: 7px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  outline: none;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.Annonce input:focus {
  width: 300px;
  max-width: 90%;
  border-color: #67a6ff;
  ;
  border-top-color: #67a6ff;
  border-left-color: #67a6ff;
  background-color: #F9F9F9;
  border-top: 1px solid #67a6ff;
  border-left: 1px solid #67a6ff;
  /* border: 1px solid #606060; */
  border-bottom: 1px solid #96c1fd;
  border-right: 1px solid #89b9fc;
  color: #515151;
  font: 16px Tahoma;
  padding: 8px;
  margin: 3px;
  margin-bottom: 7px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  outline: none;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

/*------------------------breadcump-*---------------*/
.breadcump {
  padding: 5px;
  border: 2px solid #d5d4d4;
  margin-top: 4px;
  font-family: system-ui;
  background: #f1f1f1;
  border-radius: 1px;
}

.breadcump span {
  color: rgb(143 112 15);
  font-weight: 700;
}

/*--------------------------bulltin officiel-------------*/
.bulltin {
  border: 1px solid #dbdbdb;
  border-radius: 2px;
  margin-top: 5px;
  padding: 16px;
  margin-right: 5px;
  margin-bottom: 5px;
  font-size: 23px;
}

.bulltin .form {
  text-align: right;
  display: inline-block;
  height: 35px;
  padding: 4px 6px;
  margin-bottom: 10px;
  font-size: 16px;
  line-height: 20px;
  outline: none;
  width: 600px;
  max-width: 90%;
  color: #555555;
  vertical-align: middle;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 3px;
  border-left: 1px solid gray;
  border: 1px solid #d4d4d4;
}

.bulltin .form:focus {
  text-align: right;
  display: inline-block;
  height: 35px;
  padding: 4px 6px;
  margin-bottom: 10px;
  font-size: 16px;
  line-height: 20px;
  outline: none;
  width: 600px;
  max-width: 90%;
  color: #555555;
  vertical-align: middle;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 3px;
  border-left: 1px solid gray;
  border: 1px solid #67a6ff;
}

.bulltin textarea {
  text-align: right;
  display: inline-block;
  height: 105px;
  padding: 4px 6px;
  margin-bottom: 10px;
  font-size: 16px;
  line-height: 20px;
  outline: none;
  width: 500px;
  max-width: 90%;
  color: #555555;
  vertical-align: middle;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 3px;
  border-left: 1px solid gray;
  border: 1px solid #d4d4d4;
}

.bulltin textarea:focus {
  text-align: right;
  display: inline-block;
  height: 105px;
  padding: 4px 6px;
  margin-bottom: 10px;
  font-size: 16px;
  line-height: 20px;
  outline: none;
  width: 500px;
  max-width: 90%;
  color: #555555;
  vertical-align: middle;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 3px;
  border-left: 1px solid gray;
  border: 1px solid #67a6ff;
}

.bulltin .h2 {
  color: #4c4c4c;
  letter-spacing: 3px;
  padding-bottom: 9px;
  border-bottom: 2px solid #dfdfdf;
}

.bulltin span, .contactIndex span {
  color: red;
}

.bulltin label {
  text-align: left;
}

.bulltin input, .bulltin select {
  text-align: right;
  display: inline-block;
  height: 35px;
  padding: 4px 6px;
  margin-bottom: 10px;
  font-size: 16px;
  line-height: 20px;
  outline: none;
  width: 280px;
  max-width: 90%;
  color: #555555;
  vertical-align: middle;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 3px;
  border-left: 1px solid gray;
  border: 1px solid #d4d4d4;
}

.bulltin input:focus, .bulltin select:focus {
  text-align: right;
  display: inline-block;
  height: 35px;
  padding: 4px 6px;
  margin-bottom: 10px;
  font-size: 16px;
  line-height: 20px;
  outline: none;
  width: 280px;
  max-width: 90%;
  color: #555555;
  vertical-align: middle;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 3px;
  border-left: 1px solid gray;
  border: 1px solid #67a6ff;
}

#card label {
  text-align: left;
}

#card {
  direction: rtl;
  font-family: 'PT Sans', sans-serif;
}

.bulltin input[type="number"], .bulltin input[type="date"] {
  text-align: left;
  display: inline-block;
  height: 35px;
  padding: 4px 6px;
  margin-bottom: 10px;
  font-size: 16px;
  line-height: 20px;
  outline: none;
  width: 170px;
  max-width: 90%;
  color: #555555;
  vertical-align: middle;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 3px;
  border-left: 1px solid gray;
  border: 1px solid #d4d4d4;
}

.bulltin input[type="number"]:focus, .bulltin input[type="date"]:focus {
  text-align: left;
  display: inline-block;
  height: 35px;
  padding: 4px 6px;
  margin-bottom: 10px;
  font-size: 16px;
  line-height: 20px;
  outline: none;
  width: 170px;
  max-width: 90%;
  color: #555555;
  vertical-align: middle;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 3px;
  border-left: 1px solid gray;
  border: 1px solid #67a6ff;
}

#card div {
  text-align: right;
  padding: 0;
}

#card .add {
  text-align: right;
  color: #646464;
  font-weight: 700;
  cursor: pointer;
}

#card .add:hover {
  text-align: right;
  color: #252525;
  font-weight: 700;
  cursor: pointer;
}

#card .label {
  text-align: right;
  color: rgb(201, 172, 77);
  background: #fffff0;
  /* background: #000000; */
  font-size: 30px;
  font-weight: bolder;
  border: 1px solid #e9e8cf;
  margin-bottom: 3px;
  padding: 2px;
}

.part, .part2, .part3, .part4 {
  margin-bottom: 5px;
  transform: scale(0);
}

#card table tr td {
  /* border: 1px solid; */
  border: 2px solid #e6e6e6;
  text-align: center;
}

#card table thead tr {
  background: #f5f5f5;
}

#card table tbody input {
  width: 100%;
}

#card table .delete {
  text-align: left;
  color: red;
  border: 1px solid #d6d5d5;
  padding: 5px;
  margin: 5px;
  background-color: rgb(231, 231, 231);
  cursor: pointer;
}

#card table .delete:hover {
  text-align: left;
  color: rgb(255, 61, 61);
  background-color: rgb(231, 231, 231);
  border: 1px solid #ff1212;
  padding: 5px;
  margin: 5px;
  cursor: pointer;
}

/*----------------------------------------Admin-------------------------------------------*/
.navAdmin {}

.navAdmin a {
  background: #f3f3f3;
  text-align: center;
  text-decoration: none;
  color: #424242;
  font-weight: 600;
  padding: 12px;
  margin-left: 0px;
  border: 1px solid #a6beff;
}

.navAdmin button {
  background: #f3f3f3;
  text-align: center;
  text-decoration: none;
  color: red;
  font-weight: 600;
  padding: 12px;
  margin-left: 0px;
  border: 1px solid red;
}

.navAdmin button:hover {
  background: #ffcdcd;
  text-align: center;
  text-decoration: none;
  color: red;
  font-weight: 600;
  padding: 12px;
  margin-left: 0px;
  border: 1px solid red;
}

/*-------------------------------------------Modeles annnonces légale---------------------------*/

.imgJounauxx {
  border: 0px none #000000;
  -moz-border-radius: 0px 0px 0px 0px;
  -webkit-border-radius: 0px 0px 0px 0px;
  border-radius: 0px 0px 0px 0px;
  min-width: 20px;
  min-height: 20px;
  padding: 500px 0px 0px 0px;
  background: transparent url("images/journ.jfif") no-repeat scroll center center;
  background-size: 100% 100%;
  height: 70vh;
}

/*-------------------------------------------Dernniers annnonces légale*/

.annoncelegale {
  border: 1px solid #b7b7b7;
  border-radius: 1px;
  height: 39vh;
  overflow: hidden;
  display: block;
}

.annoncelegale .numero {
  padding: 10px;
  background-color: #3e3b3b;
  color: white;
  font-size: 17px;
  font-weight: 600;
  height: 7vh;
}

.annoncelegale .rubique {
  padding: 5px;
  background: rgba(230, 197, 90, 1);
  font-family: monospace;
  font-size: 12px;
  font-family: sans-serif;
}

.annoncelegale .region {
  padding: 5px;
  background: #f1f1f1;
  font-weight: 900;
}

.annoncelegale .button {}

.annoncelegale a {
  color: rgba(230, 197, 90, 1);
  text-decoration: none;
  background: #3f3f3f;
  padding: 12px;
  border: 2px solid rgba(230, 197, 90, 1);
}

.annoncelegale a:hover {
  color: rgba(230, 197, 90, 1);
  text-decoration: none;
  background: #292929;
  padding: 12px;
  border: 2px solid rgb(190, 163, 74);
}

.annoncelegale .titre {
  padding: 10px;
  font-size: 22px;
  font-family: cursive;
  color: #545454;
}

/*-------------------Bulletin----------------*/
.bulletin {
  background: #fdfdfd;
  border: 1px solid rgba(230, 197, 90, 1);
  border-radius: 1px;
  padding: 10px;
}

.bulletin .numero {
  color: #464646;
  font-family: cursive;
  font-size: 30px;
  text-align: center;
}

.bulletin .date {
  color: #979797;
  font-size: 24px;
  font-family: cursive;
  text-align: center;
}

.bulletin .titre {
  padding: 2px;
  font-size: 30px;
  color: #5e5e5e;
  /* color: white; */
  font-family: cursive;
  text-align: center;
  background: #efefef;
  background: rgba(230, 197, 90, 1);
}

.bulletin .rubique {
  color: #323232;
  font-family: cursive;
  font-size: 18px;
  text-align: center;
}

.bulletin .text {
  letter-spacing: 1px;
  font-family: system-ui;
  color: #262626;
  font-size: 22px;
}

/*---------------------------------Recherche---------------------------------*/
.recherche {
  height: 6vh;
  border-left: 1px solid rgba(230, 197, 90, 1);
  border-bottom: 1px solid rgba(230, 197, 90, 1);
  border-top: 1px solid rgba(230, 197, 90, 1);
  border-right: 1px solid rgba(230, 197, 90, 1);
  margin-left: 9px;
}

.recherche:hover {
  box-shadow: -3px 0px 12px rgba(230, 197, 90, 1);
}

.recherche button {
  height: 5.7vh;
  width: 107%;
  border: 0;
  background: #333;
  color: rgba(230, 197, 90, 1);
  font-size: 19px;
  font-family: monospace;
  border: 1px solid rgba(230, 197, 90, 1);
}

.recherche button:hover {
  height: 5.7vh;
  width: 107%;
  border: 0;
  background: rgb(68, 68, 68);
  color: rgba(230, 197, 90, 1);
  font-size: 19px;
  font-family: monospace;
  border: 1px solid rgba(230, 197, 90, 1);
}

.recherche input {
  width: 100%;
  height: 5.6vh;
  padding: 11px;
  font-size: 18px;
  color: #393636;
  border: 0;
  outline: none;
}

/*---------------------------------les annonces---------------------------------*/

.annonce {
  /* border: 2px solid #d6d5d5; */
  border-radius: 2px;
}

.annonce a {
  text-decoration: none;
  color: black;
}

.annonce a:hover {
  text-decoration: none;
  color: black;
}

.annonce .row {
  border: 1px solid rgb(252 241 205);

  /* margin: 1px;    margin-bottom: 3px; */

}

.annonce .row:hover {
  border: 1px solid rgba(230, 197, 90, 1);

  /* margin: 1px;    margin-bottom: 3px; */

}

.annonce .categorie span {
  background: rgba(230, 197, 90, 1);
  padding: 5px;
  border-radius: 9px;
  color: #1b1b1b;
  font-family: monospace;
}

.annonce .titre {
  font-weight: 600;
  flex: 0 0 auto;
  width: 100%;
  font-size: 21px;
  color: #302f2f;
  font-family: monospace;
}

.annonce img {

  /* margin: 7px;border: 2px solid #ece9e9;  */

  width: 100%;

  border-radius: 1px;

  height: 170px;

  background-size: 100% 100%;

  height: 214px;

  margin: 4px;

  width: 98%;

}

/*----------------------Modifier Img------------------**/
.modifierImg {
  position: absolute;
  margin: 0;
  padding: 0;
  background: #32323b;
  color: white;
  border-radius: 5px;
  margin: 15%;
  display: none;
  padding-bottom: 37px;
  padding-top: 34px;
  z-index: 5;
}

/********Modification******/
.supprime {
  padding: 0px;
  padding-top: 0px;
  padding-left: 4px;
  border-radius: 0;
  padding-right: 4px;
  color: #c22c2c;
  background: #ffd1d1;
  border: 1px solid #ffbcbc;
  border-radius: 3px;
  font-size: 23px;
}

.supprime:hover {
  padding: 0px;
  padding-top: 0px;
  padding-left: 4px;
  border-radius: 0;
  padding-right: 4px;
  color: #c22c2c;
  background: #ffacac;
  border: 1px solid #9d9d9d;
  border-radius: 3px;
  font-size: 23px;
}

.modif {
  padding: 0px;
  padding-top: 0px;
  padding-left: 4px;
  border-radius: 0;
  padding-right: 4px;
  background: #cbeccb;
  color: #359b35;
  border: 1px solid #e5e5e5;
  border-radius: 3px;
  font-size: 23px;
}

.modif:hover {
  padding: 0px;
  padding-top: 0px;
  padding-left: 4px;
  border-radius: 0;
  padding-right: 4px;
  background: #cbeccb;
  color: #008a00;
  border: 1px solid #e5e5e5;
  border-radius: 3px;
  font-size: 23px;
}

.view {
  padding: 0px;
  padding-top: 0px;
  padding-left: 4px;
  border-radius: 0;
  padding-right: 4px;
  background: #acccff;
  color: #0072ff;
  border: 1px solid #a7a7ff;
  border-radius: 3px;
  font-size: 23px;
}

.view:hover {
  padding: 0px;
  padding-top: 0px;
  padding-left: 4px;
  border-radius: 0;
  padding-right: 4px;
  background: #acccff;
  color: #2e00ff;
  border: 1px solid #a7a7ff;
  border-radius: 3px;
  font-size: 23px;
}