.phenix-dashboard {
padding: 20px;
  background:#fff
}
h1{text-align:center}
.mes-annonces h2{
  background: whitesmoke;
  padding: .8rem 1rem
}
.mini-img{aspect-ratio:4/3;object-fit:cover;width:100%;min-width:200px;}

.annonce-title {
font-size: 1.125rem;
  margin-bottom: 10px;
  font-weight: 600;
  border-bottom: dashed 1px darkgoldenrod;
  padding-bottom: 10px
}
.global-ad {
display:flex;
gap:15px;
overflow:hidden
}
.annonce-item{background:#fff}
.ad-user-list li{border:solid 1px #aaa;margin:0 auto}

.ad-datas {
  display:flex;
 /* flex:1;*/
  flex-direction: column;
  gap:4px;
  padding:10px}
:is(.status,.ad-datas .date,.ad-status) {
  display: block;
  font-size: .875rem;
}

.total-shares {
  display: flex;
  gap: 4px;
  align-items: center;
}

.confirmation-page h1 {
background: #19f41938;
  display: flex;
  padding: 10px;
  justify-content: center;
}

.status{padding:2px 6px;

}
.status.published{background:#d4edda;color:#155724;font-weight:400}
.status.pending{background:#fff3cd; color:#856404}
.status.expired {background:#f8d7da;color:#721c24}
.sold-status {
    display:block
}

form.trash{margin-top:1rem}

/*Dashboard home*/

.dashboard-cards{display:grid;grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));gap:1rem}
.dashboard-cards .card{
position:relative;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
padding:1rem;
text-align:center;
min-height:8.750rem;
/*background:#f5f5f5;*/
color:inherit;
text-decoration:none;
transition:background .3s ease;
line-height:1.2;
border:solid 1px #ddd;
border-radius:5px
}
.dashboard-cards .card:hover{background:#e4e4e4;border:solid 1px transparent}
.dashboard-cards .card svg {margin-bottom:0.5rem;color: rebeccapurple}
.dashboard-cards .card.logout{background:#ffecec;color:#b00}
.dashboard-cards .card.logout svg{color:#b00}
.dashboard-cards .card.logout:hover{background:#ffdddd}

.unread-badge {
display: flex;
  background: #39e6a5;
  color: #000;
  border-radius: 50%;
  font-size: 0.8rem;
  position: absolute;
  top: -12px;
  right: -12px;
  font-weight: 600;
  padding: 10px;
  align-items: center;
  justify-content: center;
  height: 25px;
  width: 25px;
}


.fav-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.fav-item {
    display: flex;
   /* align-items: center;*/
    gap: 10px;
    border: 1px solid #ddd;
    margin-bottom: 10px;
	overflow:hidden;
	  transition:transform .3s ease, opacity .3s ease;
}
.fav-image {
  position: relative;
  display: block;
}

.fav-image img {
width: 200px;
  min-width: 200px;
aspect-ratio:4/3;
object-fit: cover}

.fav-content{
flex:1;
display:flex
}

.fav-title{
font-weight:600;
text-decoration:none;
font-size:1.25rem;
line-height:1
}
.remove-fav:hover{background:#ffdddd}
.remove-fav{
background:#cd5c5c26;
border:none;
display:flex;
padding:.875rem;
align-items: center;
justify-content: center}

.fav-item.removing {
    animation: slideOut 0.9s forwards;
}

@keyframes slideOut {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
    40% {
        transform: translate(0, 100px) scale(0.98);
        opacity: 0.8;
        animation-timing-function: ease-out; /* chute avec amorti */
    }
    100% {
        transform: translate(120vw, 100px) scale(0.9);
        opacity: 0;
        animation-timing-function: ease-in; /* accélération horizontale */
    }
}

/* Toast */
/* Conteneur de toast pour profil-edit */
#profil-toast-container {
    position: fixed; /* plus sûr que absolute */
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    pointer-events: none; /* pour que le toast ne bloque pas les clics */
    z-index: 9999;
}

.profil-toast {
    position: absolute; /* on laisse le JS gérer left/top */
    background: rgba(0,0,0,0.75);
    color: #fff;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    font-size: 0.875rem;
    opacity: 0;
    transition: opacity 0.3s ease;
    white-space: nowrap;
    max-width: 90vw;
    pointer-events:auto
}

.profil-toast.show {opacity:1}
.profil-success {
  background: #19f41938;
  padding: 1rem 2rem;
  text-align: center;
  max-width: 100%;
  margin: 2rem auto;
  font-weight: 600;
  display: block;
}

/* formulaire */
.mes-annonces h1,.phenix-favorites h1,.profil-edit h1{margin:.625rem 0 2rem; font-size:var(--wp--preset--font-size--xx-large)}

.file-drop-area .file-msg {
  margin: 1rem 0 0;
}
#profile_picture_preview {
  width: 150px;
  height: 150px;
  aspect-ratio: 1/1;
  object-fit: cover;
}
.profil-edit form,
.tableau-bord form {
    width: 100%;
  /*  max-width: 500px; */
    margin: 0 auto
}

/* Groupes de champs */
.form-group {
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column
}

/* Labels */
.form-group label{
    margin-bottom: 0.25rem;
    font-weight: 600
}

/* Inputs et textarea */
textarea#annonce_content{min-height:12.5rem}
.form-group input,
.form-group textarea {
    padding: 0.5rem 0.75rem;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 0.95rem;
    font-family: inherit;
	cursor: pointer
}

input[type="checkbox"] {
  width: auto;
  margin: 0 4px 0 0;
  height: 30px;
  width: 30px;
  accent-color: rebeccapurple
}

.cgu-checkbox label {
  display: block;
text-align: center;
  margin:2rem auto
}

.char-counter{font-size:.85rem}
.char-counter-limit,.char-counter-min{color:red;font-weight:600}

/*optiions livraison*/
.livraison-options {
    margin: 20px 0;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
}
.livraison-options legend {
    font-weight: bold;
    padding: 0 10px;
}
.livraison-options label {
   /* display: block;*/
    margin: 1rem 0;
	display: flex;
  align-items: center;
}
.livraison-options input[type="checkbox"] {
    margin-right: 10px;
}
.livraison-options input[type="number"] {
    width: 100px;
}
.form-group.port label{margin-bottom:0.25rem;font-weight:600}
.form-group.port{margin:1rem 0 30px}


/* Bouton */
button.btn,a.btn {
    padding: 0.6rem 1.2rem;
    background-color: #222;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 0.95rem;
    transition:background-color .3s ease
}

button.btn:hover {
    background-color: #444;
}
#annonce-form [type="submit"]{background:#be8500}

a.btn-view-profile {
    display:inline-block;
    background: #800080;
    text-decoration:none;
    margin-top: 10px;
    font-weight:initial}
.btn-view-profile:hover{background:#600060}




.annonce-view-toggle {
  display: flex;
  gap: 6px;
  justify-content: end;
}
.annonce-view-toggle button {
  display: flex;
  border: none;
  padding: 0.3rem;
 transition: all .3s ease-in-out
}

.annonce-view-toggle button.active {
  background: #007acc;
  color: #fff;
}



#annonce-list.cards .fav-image img {
  width: 100%;
  min-width: auto;
}
#annonce-list.cards .global-ad,#annonce-list.cards .fav-item{
	flex-direction:column}

#annonce-list.cards .ad-datas, #annonce-list.cards .fav-data.annonce-infos,
#annonce-list.list .fav-data.annonce-infos {
    padding: 0 6px 6px;
    gap: 10px;
}
#annonce-list.cards .annonce-item {
  display: inline-block;
 /* width: calc(50% - 1rem);  deux colonnes */
  margin: 0 auto;
  min-width: -moz-available;
}
#annonce-list.list .mini-img {min-width: 300px}

#annonce-list.list .annonce-item {
  display: block;
  width: 100%;
/*margin:0 auto*/
overflow: hidden;
}

#annonce-list{display:grid;gap:10px;margin-top:1rem;padding: 0}

#annonce-list.cards {

  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
/*
@media (min-width:600px){
#annonce-list.cards {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    }} */
	
	

/* Conteneur global */
    .page-wrapper {
      min-height: 100vh;
      display: flex;
      /*! flex-direction: column; */
      gap: 20px;
    }

    /* Layout principal */
    .account-layout {
      display: flex;
      gap: 20px;
      max-width: 1200px;
     /* margin: auto;*/
      /*! padding: 20px; */
      flex: 1;
    }

    /* Sidebar */
    .account-sidebar {
      min-width: 180px;
    }

    .mini-hub {
      display: flex;
      flex-direction: column;
       gap: 6px; 
   /*   background: #fff; */
    }

    .mini-hub a {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px;
      background: #f5f5f5;
      text-decoration: none;
      color: #333;
   
      text-align: center;
      transition: .3s all;
    }
	.mini-hub a:hover{
    background: #ddd
}

.mini-hub a.active {
  background: rebeccapurple;
  font-weight: bold;
  color:#fff
}

.account-content{flex:1;background:#fff;padding:20px}
.account-content p {margin:0 0 1em}


/*Delete*/
.delete-account-container{
border-top: solid 1px #ccc;
  padding: 2rem 0;	
}

button.btn-delete-account,button.btn-delete-profile,button.btn-delete-annonce{background:#e63946;transition:background 0.2s ease}

.btn-delete-account:hover ,.btn-delete-annonce{background:#d32f2f;}

.delete-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.delete-overlay[style*="display: flex"] {
    display: flex;
}

.delete-modal {
  
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    max-width: 400px;
    width: 90%;
    text-align: center;
    animation: slideIn .3s ease;
    filter: drop-shadow(0 4px 11px rgba(172, 172, 172, 0.85));
}

@keyframes slideIn {
    from { transform: translateY(-480px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.delete-modal p {
     margin-bottom: 20px;
    font-size: initial;
}

.btn-confirm {
    background: #e63946;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    margin-right: 10px;
}

.btn-confirm:hover {
   background: #d32f2f;
}

.btn-cancel {
    background: #ccc;
    color: #333;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
}

.btn-cancel:hover {
    background: #bbb;
}

@media (max-width: 480px) {
    .form-group input,
    .form-group textarea,
    button.btn,a.btn {
        padding:.4rem .6rem;
        font-size:.85rem}
	#annonce-list.list .global-ad,.fav-item{
		flex-direction:column
}
    #annonce-list.list .annonce-thumb{
        width: 100%;
		aspect-ratio: 16/9;
    }
	#annonce-list.cards {
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr))
}
	#annonce-list.cards .mini-img{
	min-width:150px
			}
    #annonce-list.list .mini-img{
		aspect-ratio: 16/9;
object-fit:cover
}}

    /* Mobile */
    @media (max-width: 768px) {
      .account-layout {
        /*! flex-direction: column; */
      }
      .page-wrapper{
        display: block;
		min-height:auto
      }

      .account-sidebar {
        width: 100%;
        z-index: 1001;
      }

      .mini-hub {
        flex-direction: row;
       justify-content: flex-start;
        border-bottom: 1px solid #ddd;
        overflow-x: auto;
        padding: 0;
		gap:0;
    scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
      }

      .mini-hub a {
        flex-direction: column;
        justify-content: center;
        padding: 6px 8px;
        font-size: 0.85rem;
        min-width: 100px;
		min-height: 70px;
        border-right: 1px solid #eee;
		line-height:1
      }
.mini-hub a:last-child{border-right:unset}
      .mini-hub.fixed {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1001;
        background: #fff;
filter: drop-shadow(0 2px 4px rgba(0,0,0,.2));
        gap:0;
        
      }
      .mini-hub.fixed a{
        font-size: 0.625rem;
		min-width: unset;
    width: 100%;
        
      }
.mini-hub.fixed svg{width:16px;height:16px}
.account-content{margin-top:20px}}

@media (min-width: 769px) {.account-sidebar{position:sticky;top:60px;align-self:flex-start;gap:20px}}