@media screen and (min-width:1024px) {

      /* affichage en grand de photo actu */
      #modals{
        display:none; 
        position:fixed; 
        top:0; 
        left:0; 
        width:100%; 
        height:100%; 
        background:rgba(0,0,0,0.8); 
        z-index:1000;
      }

      #modalspan{
        color:red;
        background:rgba(54, 52, 52, 0.8); 
        font-size:40px; 
        position:absolute; 
        right:25%; 
        cursor:pointer;
      }

      #modalImages{
        margin:auto; 
        display:block; 
        width:50%; 
        height:auto;
      }

      #saveButtons{
        position:absolute; 
        bottom:20px; 
        left:50%; 
        transform:translateX(-50%); 
        padding:10px; 
        background:#fff; 
        cursor:pointer;
      }

          /* affichage en grand de photo search*/
      #modalsss{
        display:none; 
        position:fixed; 
        top:0; 
        left:0; 
        width:100%; 
        height:100%; 
        background:rgba(0,0,0,0.8); 
        z-index:1000;
      }

      #modalspansss{
        color:red;
        background:rgba(54, 52, 52, 0.8); 
        font-size:40px; 
        position:absolute; 
        right:25%; 
        cursor:pointer;
      }

      #modalImagesss{
        margin:auto; 
        display:block; 
        width:50%; 
        height:auto;
      }

      #saveButtonsss{
        position:absolute; 
        bottom:20px; 
        left:50%; 
        transform:translateX(-50%); 
        padding:10px; 
        background:#fff; 
        cursor:pointer;
      }

       /* affichage en grand de photo mes pub */
      #modalss{
        display:none; 
        position:fixed; 
        top:0; 
        left:0; 
        width:100%; 
        height:100%; 
        background:rgba(0,0,0,0.8); 
        z-index:1000;
      }
      
    #supp {
    position: fixed;
    top: 48%; 
    left: 48%; 
    transform: translate(-48%, -48%); 
    background-color: white; 
    border: 1px solid #5a5656; 
    padding: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0); 
    z-index: 1000; 
    text-align: center; 
    border-radius: 15px;
    display: none;

   }

    #supp span {
        display: block; 
        margin-bottom: 10px;
        font-size: 16px;
        font-weight: bolder;

    }

    #supp button {
        margin: 10px; 
        font-size: 14px;
        padding: 10px 15px; /* Espacement interne des boutons */
    border: none; /* Pas de bordure par défaut */
    border-radius: 5px; /* Coins arrondis */
    cursor: pointer; 
    transition: background-color 0.3s, transform 0.3s;
    }

   #supp button:nth-child(2) {
    background-color: #4CAF50; /* Couleur verte pour le bouton "oui" */
    color: white; /* Texte blanc */
    }

    #supp button:nth-child(3) {
        background-color: #f44336; /* Couleur rouge pour le bouton "non" */
        color: white; /* Texte blanc */
    }

    /* Effet de survol */
    #supp button:hover {
        transform: scale(1.05); /* Agrandit légèrement le bouton */
    }

    #supp button:nth-child(2):hover {
        background-color: #45a049; /* Couleur verte légèrement plus foncée */
    }

    #supp button:nth-child(3):hover {
        background-color: #e53935; /* Couleur rouge légèrement plus foncée */
    }


    #bloquer {
    position: fixed;
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    background-color: white; 
    border: 1px solid #5a5656; 
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0); 
    z-index: 1000; 
    text-align: center; 
    border-radius: 15px;
    display: none;
    color: #31B7F5;

   }

    #bloquer span {
        display: block; 
        margin-bottom: 10px;
        font-size: 16px;
        font-weight: bolder;
        color: #31B7F5;

    }
.default_image{
        opacity: 0.7;
    }
    #bloquer button {
    margin: 10px; 
    font-size: 14px;
    padding: 10px 15px; /* Espacement interne des boutons */
    border: none; /* Pas de bordure par défaut */
    border-radius: 5px; /* Coins arrondis */
    cursor: pointer; 
    transition: background-color 0.3s, transform 0.3s;
    }

   #bloquer button:nth-child(2) {
    background-color: #4CAF50; /* Couleur verte pour le bouton "oui" */
    color: white; /* Texte blanc */
    }

    #bloquer button:nth-child(3) {
        background-color: #f44336; /* Couleur rouge pour le bouton "non" */
        color: white; /* Texte blanc */
    }

    /* Effet de survol */
    #bloquer button:hover {
        transform: scale(1.05); /* Agrandit légèrement le bouton */
    }

    #bloquer button:nth-child(2):hover {
        background-color: #45a049; /* Couleur verte légèrement plus foncée */
    }

    #bloquer button:nth-child(3):hover {
        background-color: #e53935; /* Couleur rouge légèrement plus foncée */
    }

      #modalspanss{
        color:red;
        background:rgba(54, 52, 52, 0.8); 
        font-size:40px; 
        position:absolute; 
        right:25%; 
        cursor:pointer;
      }

      #modalImagess{
        margin:auto; 
        display:block; 
        width:50%; 
        height:auto;
      }

      #saveButtonss{
        position:absolute; 
        bottom:20px; 
        left:50%; 
        transform:translateX(-50%); 
        padding:10px; 
        background:#fff; 
        cursor:pointer;
      }


      /* affichage en grand de photo profil */
      
      #modal{
        display:none; 
        position:fixed; 
        top:0; 
        left:0; 
        width:100%; 
        height:100%; 
        background:rgba(0,0,0,0.8); 
        z-index:1000;
      }

      #modalspan{
        color:red;
        background:rgba(54, 52, 52, 0.8); 
        font-size:40px; 
        position:absolute; 
        right:25%; 
        cursor:pointer;
      }

      #modalImage{
        margin:auto; 
        display:block; 
        width:50%; 
        height:auto;
      }

      #saveButton{
        position:absolute; 
        bottom:20px; 
        left:50%; 
        transform:translateX(-50%); 
        padding:10px; 
        background:#fff; 
        cursor:pointer;
      }




      .notif_non_lus_pc{
            
            border-radius: 50%;
            width: 15px;
            height: 15px;
            color:WHITE;
            font-weight: bold;
            background-color:rgb(199, 46, 18);
            text-align: center;
            padding:2.5px;
            font-size: 10px;
            position: absolute;
            top:6.5%;
            right: 7%;
            display: block;
            
        }

    .voir-plus_pc {
    display: block;
    margin: 20px auto;
    padding: 10px 20px;
    background: #31B7F5;
    color: white;
    border: none;
    cursor: pointer;
    font-weight: bolder;
    }

    .voir-plus_pc:hover { background: #31B7F5;cursor: pointer; }
    .voir-plus_pc:disabled { background: #aaa8a8;cursor: pointer; }

    .container_formSearch {
        flex: 1;
        overflow-y: auto;
        margin-top: 106px;
        /* background-color: #8ba7a8; */
        padding: 10px;
    }

    .header_phone,
    .footer,
    #container_Annonce_phone,.update_announ_phone ,.voir-plus_phone{
        display: none;
    }

    /* header   ------------------------------------------  */
    .header_pc {
        background:white;
        width: 100%;
        height: 104px;
        position: fixed;
        left: 0px;
        top: 0px;
        overflow: hidden;
        z-index: 1000;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
       
    }

    .logo-transparent {
        width: 171.79px;
        height: 40px;
        position: absolute;
        left: 5%;
        top: 20%;
        font-size: 30px;
        color: #31B7F5;
        font-weight: bolder;
    }

    /* footer   ------------------------------------------  */
    #img_actualite {
        width: 40px;
        height: 40px;
        position: absolute;
        left: 60%;
        top: 16px;
        object-fit: cover;
        aspect-ratio: 1;
        cursor: pointer;
    }

    #mes-actu {
        position: absolute;
        left: 59%;
        top: 60px;
       
        font-family: "Inter-SemiBold", sans-serif;
        font-size: 15px;
        color: #31B7F5;
        font-weight: bolder;
        cursor: pointer;
    }

    #icon_search {
        width: 40px;
        height: 40px;
        position: absolute;
        left: 70%;
        top: 16px;
        object-fit: cover;
        aspect-ratio: 1;
        cursor: pointer;
    }

    #mes-search {
        position: absolute;
        left: 69%;
        top: 60px;
        font-family: "Inter-SemiBold", sans-serif;
        font-size: 15px;
        color: #31B7F5;
        font-weight: bolder;
        cursor: pointer;
    }


    #img_compte {
        width: 40px;
        height: 40px;
        position: absolute;
        left: 80%;
        top: 16px;
        object-fit: cover;
        aspect-ratio: 1;
        cursor: pointer;
    }

    #mon-compte {
        position: absolute;
        left: 78%;
        top: 60px;
        font-family: "Inter-SemiBold", sans-serif;
        font-size: 15px;
        color: #31B7F5;
        font-weight: bolder;
        text-align: center;
        cursor: pointer;
    }

    #notification {
        width: 40px;
        height: 40px;
        position: absolute;
        left: 90%;
        top: 16px;
        object-fit: cover;
        aspect-ratio: 1;
        cursor: pointer;
    }

    #mes-notif {
        position: absolute;
        left: 87%;
        top: 60px;
        font-family: "Inter-SemiBold", sans-serif;
        font-size: 15px;
        color: #31B7F5;
        font-weight: bolder;
        text-align: center;
        cursor: pointer;
    }

     .footer-icon {
        text-align: center;
        position: relative;
        
    }


    .border {
        width: 10px;
        height: 2px;
        background-color: red;
        position: absolute;
        
        display: none;
        border-radius: 50%;
    }

    .header-icon.active .border {
        display: block;
        cursor: pointer;

    }

    #container_PC {
       
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: flex-start;
        
    }

     #container_PC_mesAnnonces {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: flex-start;
    }
   
  
      #partages {

        border-radius: 10px;
        border: none;
        box-shadow: 0px 2px 5px #9e9d9d;
        padding: 3px;
        cursor: pointer;
        margin:5px ;
       
    }

    


   #principal {
        background: white;
        font-weight: bolder;
        margin: 4% 0 4% 6%;
        width: 25%;
        padding: 5px;
        border-radius:7px;
        position: relative;
        border: none;
        box-shadow: 0px 2px 5px #ccc;
    }

    #ent {
        background-color: white;
    }

    #entete {
        display: flex;
        align-items: center;
        border-radius: 20px;
        padding: 10px;
    }

    .image-certif-contain{
        position:relative;
        display: block;
        

    }
    #photo {
        width: 45px;
        height:45px;
        border-radius: 50%;
        margin-right: 10px;
        border: 2px solid #31B7F5;
    }

    .icon-certif{
        background-color: white;
        border-radius: 50%;
        position:absolute;
        left:0px;
   }



    #bouton_profil {
        color: #31B7F5;
        background: white;
        border: none;
        padding: 2px;
        border-radius: 7px;
        height: 30px;
        margin-left: auto;
        /* box-shadow: 0 0 2px 3px rgba(0, 0, 0, 0.2); */
        font-size: 13px;
        cursor: pointer;
        position: absolute;
        right: 2%;
        top:5%;
    }

    span {
        font-size: 10px;
        color:black;
    }

    #info {
        flex-grow: 1;
         font-size: 10px;
    }

    #body {
        background: white;
    }

    #scroll_photo {
        height: 150px;
        background: white;
        border: 1px solid white;
    }

    #caroussel{
        overflow: auto;
        padding: 1%;
        padding-top: 1%;
        display: flex;
        width: 98%;
        height: 96%;
        background-color: rgb(249, 249, 252);
    }

    .image_announ{
        display: flex;
        gap: 5px;
      
        
    }

    #description {
        margin: 2.5px 2.5px 2.5px 0px;
        background: white;
        border-radius: 5px;
        padding: 2.5px;
        text-align: justify;
        font-weight: bolder;
        font-size: 14px;
        color: black;
    }

    #info_localite {
        margin: 5px 0;
        background: white;
        border-radius: 5px;
        padding:4px 4px 4px 8%;
        line-height: 1.5;
        font-size: 14px;
       
    }

    
    #description {
        font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
        
    }

    #type {
        font-size: 14px;
        display: inline-block;
        text-align: left;
        padding: 4px;
        padding-left: 10px;
        padding-right: 20px;
        font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
        font-weight: bolder;
        background: #31B7F5;
        color: white;
        margin-bottom: 10px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);

    }

    

    .container-btnAnnonce {
        display: flex;
        justify-content: space-around;
        width: 100%;
        border: none;
        position: relative;
        gap:5px;

    }

   
    #tableaus {
        margin: auto;
      
    }

    td {
        text-align: center;
    }

    #view,
    #comment,
    #partage {
        

        
        color: #31B7F5;
        display: flex;
        flex-direction: column;
        align-items: center;
        border: none;
        padding: 5px;
        padding-top:2px;
        padding-left:5%;
        padding-right:5% ;
        cursor: pointer;
        text-align: center;
        font-family: Arial, sans-serif;
        text-decoration: none;
        border-radius: 10px 10px 10px 10px ;
        background: white;
    }

    .btnActuPc img{
        width:20px;
        height: 15px;
    }

    .img-localite{
       width:20px;
       height: 20px; 
    }

    .btnActuPc span{
        font-size: 13px;
        font-weight: bold;
        color: #31B7F5;
    }

    .Contenu_Actualite {
        flex: 1;
        overflow-y: auto;
        margin-top: 107px;
     
    }

    .container_Account {
        flex: 1;
        overflow-y: auto;
        margin-top: 106px;
        /* background-color: #8ba7a8; */
        padding: 10px;
    }

     .containner_bouton_account {
        background-color: white;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-around;
        padding: 5px;
        position: fixed;
        width: 100%;
        top:106px;
        border-radius: 0 0 10px 10px;
        height: 60px;
        border-top: none;
        left:0%;
        right: 0%;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);


    }

    .containner_bouton_account hr{
       display: none;
    }

     #bouton_account1 {
        box-shadow: 0 4px 8px rgba(0, 0, 0); 
        padding: 5px;
        margin: 5px;
        background-color: #82a5d7;
        font-size: 12px;
        text-align: center;
        border-radius: 17px;
        color: white;
        cursor: pointer;
    }

     #bouton_account10 {
        padding: 5px;
        margin: 5px;
        background-color: #82a5d7;
        font-size: 12px;
        text-align: center;
        border-radius: 17px;
        color: white;
        cursor: pointer;
    }

    #bouton_account2 {
        padding: 5px;
        margin: 5px;
        background-color: #82a5d7;
        font-size: 12px;
        text-align: center;
        border-radius: 17px;
        color: white;
        cursor: pointer;
    }

    #bouton_account9 {
        padding: 5px;
        margin: 5px;
        background-color: #82a5d7;
        font-size: 12px;
        text-align: center;
        border-radius: 17px;
        color: white;
        cursor: pointer;
    }
       #bouton_account3 {
        padding: 5px;
        margin: 5px;
        background-color: #82a5d7;
        font-size: 12px;
        text-align: center;
        border-radius: 17px;
        color: white;
        cursor: pointer;
    }
       #bouton_account4 {
        padding: 5px;
        margin: 5px;
        background-color: #82a5d7;
        font-size: 12px;
        text-align: center;
        border-radius: 17px;
        color: white;
        cursor: pointer;
   
    }
    
       #bouton_account6 {
        padding: 5px;
        margin: 5px;
        background-color: #82a5d7;
        font-size: 12px;
        text-align: center;
        border-radius: 17px;
        color: white;
        cursor: pointer;
    }
       #bouton_account7 {
        padding: 5px;
        margin: 5px;
        background-color: #82a5d7;
        font-size: 12px;
        text-align: center;
        border-radius: 17px;
        color: white;
        cursor: pointer;
    }

         #bouton_account8 {
        padding: 5px;
        margin: 5px;
        background-color: #82a5d7;
        font-size: 12px;
        text-align: center;
        border-radius: 17px;
        color: white;
        cursor: pointer;
    }

    

    .info_account {
        flex: 1;
        overflow-y: auto;
        margin-top: 20px;
        padding-left: 20%;
        padding-right: 20%;
        background-color: transparent;
        padding: 5% 5% 5% 5%;

        
       

    }
    .info_accountss {
        flex: 1;
        overflow-y: auto;
        margin-top: 20px;
        /* padding-left: 20%;
        padding-right: 20%; */
        background-color: #8ba7a8;
        padding: 5%;
       

    }

    .container_notification {
       
        overflow-y: auto;
        margin-top: 106px;
        /* background-color: #8ba7a8; */
        padding: 20px;
    }

    
    .messageAttente1{
        color: #ff0037;
        font-weight: bold;
        font-size: 20px;
        margin-top: 15px; 
        margin-left: 15%;
        margin-right: 15%; 
        /* transform: translate(-50%, -50%);  */
        display: block;
    }
    .messageAttente1::after {
        content: '';
        left: 100%;
        animation: dotsss 1.5s infinite;
    }
    @keyframes dotsss {
        0%, 20% { content: ' '; }
        20%, 40% { content: '.'; }
        40%, 60% { content: '..'; }
        60%, 80% { content: '...'; }
        80%, 100% { content: ''; }
    }

    #messageAttente{
        color: #ff0037;
        font-weight: bold;
        font-size: 20px;
        margin-top: 15px; 
        margin-left: 15%;
        margin-right: 15%; 
        /* transform: translate(-50%, -50%);  */
        display: none;
    }
    #messageAttente::after {
        content: '';
        left: 100%;
        animation: dotss 1.5s infinite;
    }
    
    
    
    @keyframes dotss {
        0%, 20% { content: ' '; }
        20%, 40% { content: '.'; }
        40%, 60% { content: '..'; }
        60%, 80% { content: '...'; }
        80%, 100% { content: ''; }
    }



    #actionBtn{
        position: fixed;
        opacity: 0.3;
        top:103px;
        right: 0;
        left: 0;
        bottom: 0;
        z-index: 10000;
        display: none;
        justify-content: center;
        align-items: center;
    }
    #close-open{
        display: none;
    }
    #close-open img{
        display: none;
    }
    

    #actionBtnSpan{
        position: relative;
        color: white;
        font-size: 40px;
        /* top: 40%;
        left: 20%;
        right: 20%; */
        font-weight: bolder;

    }

    #actionBtnSpan::after {
        content: '';
        position: absolute;
        left: 100%;
        animation: pp 1.5s infinite;
    }

      #actionBtnProfil{
        position: fixed;
        opacity: 0.3;
        top:103px;
        right: 0;
        left: 0;
        bottom: 0;
        z-index: 10000;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #actionBtnSpanProfil{
        position: relative;
        color: white;
        font-size: 40px;
        /* top: 40%;
        left: 20%;
        right: 20%; */
        font-weight: bolder;

    }

    #actionBtnSpanProfil::after {
        content: '';
        position: absolute;
        left: 100%;
        animation: pp 1.5s infinite;
    }

    @keyframes pp {
        0%, 20% { content: ' '; }
        20%, 40% { content: '.'; }
        40%, 60% { content: '..'; }
        60%, 80% { content: '...'; }
        80%, 100% { content: ''; }
    }

     /*---------------------------------info user message notification ------------------------------- */

    .message-preview {
        display: flex;
        align-items: center;
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
        padding: 5px;
        margin-bottom: 20px;
        width: calc(100%-30%);
        margin-left: 15%;
        margin-right: 15%;
    }
    .profile-pic {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        margin-right: 15px;
    }
    .message-details {
        flex-grow: 1;
    }
    .sender-name {
        font-weight: bold;
        margin: 0;
    }
    .message-content {
        display: inline-block;
        margin-right: 10px;
        color: #555;
        font-size: 12px;
    }
    .message-time {
        font-size: 0.9em;
        color: #999;
        display: inline-block;
    }


    #affichage-solde-containerp {
        /* display: inline-block; */
        display: none;
        background: linear-gradient(135deg, #667eea, #764ba2);
        color: white;
        padding: 8px 6px;
        border-radius: 12px;
        font-family: -apple-system, BlinkMacSystemFont, sans-serif;
        font-size: 14px;
        font-weight: 600;  
        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
        border: 1px solid rgba(224, 184, 184, 0.1);
        transition: all 0.3s ease;
        cursor: default;
        position: fixed;
        top: 60px;
        left:20%;   
        right: 60%;
        width:calc(100%-80%);
        text-align: center;
        white-space: nowrap;
        z-index: 1000;
    }

    .ultra-solde:hover {
        transform: translateY(-1px);
        box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
    }

}