.annonce > div
{
  padding: 5pt;
}

.buttConnect,
.retListPa {
  color: #8A931F;
  font-size: 12pt;
  width: 25%;
}

.buttConnect:hover,
.retListPa:hover {
  cursor: pointer;
  text-decoration: underline;
}

#filters{
  text-align: right;
}

#filters:hover
{
  cursor: pointer;
  font-weight: bold;
}

#filtersAnnonces
{
  grid-template-columns: auto auto;
  background-color: #89931f59;
  border-radius: 5pt;
}

#filtersAnnonces[display='false']
{
  display: none;
}

#filtersAnnonces[display='true']
{
  display: grid;
}

#filtersAnnonces > div
{
  padding: 5pt;
}

.filtersTitre
{
  font-size: 20pt;
  text-align: center;
  color: #8A931F;
  grid-column: 1 /span 2;
}



#filtreType
{
  width: 30%;
}

#filtreDpt
{
  width: 25%;
}

.myDbHead {
  display: grid;
  grid-template-columns: auto auto;
  padding-bottom: 5pt;
  border-bottom: solid 1px black;
  margin-bottom: 5pt;
}

.listAnnonces>div, .listAnnoncesHead>div:not(#filtersAnnonces){
  position: relative;
  display: grid;
  grid-template-columns: 1.5fr 3.5fr 2fr;
  grid-template-areas: "prod elvCont vid"
    "dispo expCont vid";
  padding-bottom: 5pt;
  padding-top: 5pt;
  background: transparent;
}

.myPa>div {
  position: relative;
  display: grid;
  grid-template-columns: 2fr 2.25fr 1.5fr 1fr 1fr;
  grid-template-areas: "prod dispo elvCont status vid";
}

.status
{
   text-align: center;
   font-weight: bold;
}

.vendue
{
  color: #8A931F;
}

.expire{
  color: #A22A23;
}

.listAnnonces>div[data-overlay="true"]::before {
  content: "VENDUES";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-10deg);
  font-weight: bold;
  color: green;
  font-size: 70pt;
  opacity: 0.4;
  pointer-events: none; 
  z-index: 0; 
}
.border-annonce
{
  border-bottom: solid 2pt rgb(226, 221, 221);
  margin: 1pt 10pt 1pt 10pt;
}


/* Contenu au-dessus */
.listAnnonces > div[data-overlay="true"] > * {
  position: relative;
  z-index: 1;
}

.listAnnonces>div[data-cessation="true"]::before {
  content: "CESSATION";
  position: absolute;
  background-color: #b79178;
  top: 40%;
  left: -65pt;
  transform: rotate(-90deg);
  font-weight: bold;
  color: white;
  font-size: 12pt;
  pointer-events: none; 
  z-index: 0; 
  padding: 5pt 10pt 5pt 10pt;
  border-radius: 20pt;
}

.listAnnonces>div[data-cessation="true"] {
  background-color: #b7917873;
  border-radius: 20pt;
}


/* Contenu au-dessus */
.listAnnonces > div[data-cessation="true"] > * {
  position: relative;
  z-index: 1;
}
.titre {
  color: #A22A23;
  font-size: 20pt;
  text-transform: uppercase;
  text-align: center;
  padding-bottom: 5pt;

}

.headAnnonces {
  color: #A22A23;
  font-weight: bold;
  padding-bottom: 2.5pt;
  padding-top: 2.5pt;
  padding-bottom: 2.5pt;
  font-size: 20pt;
  text-align: center;
}

.libelleProd {
  color: #A22A23;
  font-weight: bold;
}

.prod {
  grid-area: prod;
  font-size: 16pt;
}

.dispo {
  grid-area: dispo;
  display: grid;
  grid-template-columns: 100%;
}

.dispoMyAnn {
  grid-area: dispo;
}

.status{
  grid-area: status;
}

.annonce select{
  width:45%;
}

.elvCont {
  grid-area: elvCont;
}

.expCont {
  grid-area: expCont;
}

.vid {
  grid-area: vid;
}

.caseContact {
  display: grid;
  grid-template-columns: 1.5fr 4fr;
}

.labelCc {
  grid-row: 1 / span 2;
}

.sold {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.2;
  /* effet "en fond" */
  font-size: 30px;
  pointer-events: none;
  /* permet de cliquer à travers */
}

.connect {
  text-align: center;
}

.connect {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding-bottom: 5pt;
  padding-top: 5pt;
  width: 450pt;
  text-align: center;
  margin-left: 25%;
  
}

.connect>div {
  font-weight: bold;
  font-size: 15pt;
  margin-top: 5pt;
  margin-bottom: 5pt;
}

.buttConn {
  grid-column-start: 1;
  grid-column-end: 3;
}

.userName {
  font-size: 14pt;
  color: #A22A23;
  font-weight: bold;
}

#disconect
{
  color: #A22A23;
}

#disconect:hover
{
  cursor: pointer;
  text-decoration: underline;
  font-weight: bold;
}

/*.newPa {
  display: grid;
  grid-template-columns: 1fr 0.5fr 1fr 2fr 2fr 1fr;
  text-align: center;
}*/

.newPaGest {
  display: grid;
  grid-template-columns: 1fr 0.5fr 1fr 2fr 2fr 2fr 1fr;
  text-align: center;
}

.newPa {
  display: grid;
  grid-template-columns: 40% 40% 20%;
  grid-template-areas: 'nbtype gest vel'
                       'dispannee tel upload';
}

.newPa .nbtype {
  grid-area: 'nbtype';
}

.newPa .gest {
  grid-area: 'gest';
}

#selCatAnim, #selDispo
{
  width: 40%;
}

#selPeriodeVel
{
  width: 52%;
}

.gestchkb
{
  display: none;
}

.anneeDispo, #anneeDispo
{
  width: 25%;
  height: 36px;
  border: 1px solid #ddd;
}

.nbProd
{
  width: 25%;
  height: 36px;
  border: 1px solid #ddd;
}

.tel{
  width: 50%;
  height: 36px;
  border: 1px solid #ddd;
}

.chkcess 
{
  padding-top: 15pt !important;
}

.newPa .pVel {
  grid-area: 'vel';
}

.newPa .dispannee {
  grid-area: 'dispannee';
}
.newPa .tel {
  grid-area: 'tel';
}
.newPa .upload {
  grid-area: 'upload';
}

.newPa>div,
.newPaGest>div {
  padding: 5pt;
}

.newPa>div>input,
.newPa>div>select,
.newPaGest>div>input,
.newPaGest>div>select {
  max-height: 2em;
  border: 0.5px solid #ddd;
}

#nbProd {
  max-width: 5em;
}

#tel {
  max-width: 7em;
}

.recann
{
  color: green;
}

.isVel,#anneeDispo {
  display: none;
}

.menuMyDb
{
  display: grid;
  grid-template-columns: 2fr 2fr;
  
}

.menuMyDbOn
{
  font-weight: bold;
  color: white;
  background-color: #89931fd5;
  border-radius: 5pt;
  border: solid 1pt #A22A23;
}

.menuMyDb > div
{
  color: #A22A23;
  font-size: 18pt;
  text-align: center;
}

.menuMyDb > div:not(.menuMyDbOn):hover 
{
  color: white;
  cursor: pointer;
  text-decoration: underline;
  background-color: #89931fd5;
  border-radius: 5pt;
}

.myAnnList
{
  padding: 5pt;
}

.editarch
{
  text-align: right;
  color: #A22A23;
  font-size: 16pt;
}

.editarch > span
{
  padding-left: 0.5pt;
}

.editarch > span :hover
{
  cursor: pointer;
}

.myNewAnn
{
  display: none;
}

#vid{
  position: relative;
}

#vid> button
{
  all: revert;
}

.mon-bouton-upload  {
  border: 2px dashed #ccc;
  border-radius: 8px;
  text-align: center;
  cursor: pointer;
  background: #f9f9f9;
    
}

#preview
{
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 images max */
  gap: 15px;

}

.imgPreview
{
  display: grid;
  grid-template-rows: auto auto;
}

.previmg
{
  grid-column: 1 / span 5;
  display: none;
  grid-template-columns: 33% 33% 33%;
}

.previmg > .myImg
{
  padding: 5pt;
  text-align: center;
}

.commRefus
{
  grid-column: 1 / span 3;
  display: none;
  grid-template-columns: 30% 70%;
  
}

.commRefus > .titre
{
  color: #A22A23;
  font-size: 12pt;
  border-bottom: 1pt solid black;
  text-align: left;
}


.imgMyAnn
{
  max-width: 250px;
  max-height: 250px;
}

.add-image {
    border: 2px dashed #ccc;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    background: #f9f9f9;
     
}

.add-btn {
    cursor: pointer;
    color: #A22A23;;
    font-weight: bold;
}

.add-image:hover {
    border-color: #999;
    background: #f0f0f0;
}


.remove-image, .add-newimg {
  display: inline-block;
  margin-top: 5px;
  cursor: pointer;
  color: #A22A23;
  font-size: 18px;
}

.carousel {
    position: relative;
    width: 100%;
}

.slide {
  display: flex;
  justify-content: center; 
  align-items: center;
  width: 100%;
}


.carouButt
{
  display: grid;
  grid-template-columns: auto auto;
}

.prev {
  text-align: left;
}

.next {
  text-align: right;
}

.slide img {
    max-height: 200px;
    max-width: 200px;
    width: auto;
    height: auto;
    display: block;        
}

.filter_act:empty
{
  display: none;
}

.filter_act:hover
{
  cursor: pointer;
  box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.3);
  transform: translate(-2px, -2px); 
}

.filter_act
{
  border: solid 1pt rgb(58, 131, 29);
  border-radius: 0.5em;
  background-color: rgb(86, 197, 43);
  padding: 2pt;
  color: #A22A23;
}

#lightbox {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0; top: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.9);
    text-align: center;
}

#lightbox img {
    max-width: 90%;
    max-height: 90%;
    margin-top: 5%;
}

#lightbox .close {
    position: absolute;
    top: 20px;
    right: 40px;
    color: white;
    font-size: 40px;
    cursor: pointer;
}

#lightbox button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 30px;
    background: none;
    border: none;
    color: white;
    cursor: pointer;
}

#lightbox .prev { left: 20px; }
#lightbox .next { right: 20px; }