@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

  :root{
    --bg: #F4F4F1;
    --surface: #FFFFFF;
    --text: #1C1C1A;
    --text-2: #6E6C64;
    --text-3: #9A9789;
    --border: #E4E1D8;
    --accent: #E85D2C;
    --accent-dark: #C64A1F;
    --accent-bg: #FDECE4;
    --blue: #1E56B0;
    --ok: #2E7D4F;
    --ok-bg: #E7F4EC;
    --radius: 16px;
    --shadow: 0 1px 2px rgba(28,28,26,0.06), 0 4px 14px rgba(28,28,26,0.05);
  }

  *{ box-sizing:border-box; }
  /* L'attribut hidden doit toujours gagner, même face à .field/.row2 qui
     posent display:flex avec la même priorité CSS (sinon un élément
     "hidden" reste visible en boîte flex vide — bug réel constaté). */
  [hidden]{ display:none !important; }
  html{ scroll-behavior:smooth; }

  body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:'Inter', -apple-system, sans-serif;
    -webkit-font-smoothing:antialiased;
  }

  a{ color:inherit; }

  /* ---- Bannière d'accueil ---- */
  .homepage-banner{
    max-width:1180px;
    margin:0 auto;
    padding:1rem 1.4rem 0;
  }
  .homepage-banner img{
    width:100%;
    height:260px;
    object-fit:cover;
    display:block;
    border-radius:var(--radius);
  }
  @media (max-width:560px){
    .homepage-banner img{ height:150px; }
  }

  /* ---- Header ---- */
  header{
    position:sticky;
    top:0;
    z-index:20;
    background:var(--surface);
    border-bottom:1px solid var(--border);
  }

  .header-inner{
    max-width:1180px;
    margin:0 auto;
    padding:0.85rem 1.4rem;
    display:flex;
    align-items:center;
    gap:1.2rem;
  }

  .logo{
    display:flex;
    align-items:center;
    gap:0.4rem;
    font-weight:700;
    font-size:1.28rem;
    letter-spacing:-0.01em;
    flex-shrink:0;
    text-decoration:none;
    color:inherit;
  }
  .logo .dot{
    width:9px; height:9px;
    border-radius:50%;
    background:var(--accent);
    display:inline-block;
  }
  .logo .brand-france{ color:var(--blue); }
  .logo .brand-annonce{ color:var(--accent); }

  .search-bar{
    flex:1;
    display:flex;
    align-items:center;
    gap:0.5rem;
    background:var(--bg);
    border:1px solid var(--border);
    border-radius:999px;
    padding:0 0.4rem 0 0.9rem;
    max-width:640px;
  }
  .search-bar svg{ flex-shrink:0; color:var(--text-3); }
  .search-bar input{
    flex:1;
    border:none;
    background:none;
    padding:0.68rem 0.4rem;
    font-family:inherit;
    font-size:0.92rem;
    color:var(--text);
  }
  .search-bar input:focus{ outline:none; }
  .search-bar input::placeholder{ color:var(--text-3); }

  .post-btn{
    display:inline-flex;
    align-items:center;
    gap:0.4rem;
    font-family:inherit;
    font-weight:600;
    font-size:0.9rem;
    background:var(--accent);
    color:#fff;
    border:none;
    padding:0.68rem 1.1rem;
    border-radius:999px;
    cursor:pointer;
    white-space:nowrap;
    text-decoration:none;
    transition:background 0.12s ease;
    flex-shrink:0;
  }
  .post-btn:hover{ background:var(--accent-dark); }
  .post-btn:focus-visible{ outline:2px solid var(--accent-dark); outline-offset:2px; }

  /* ---- Barre de catégories sous le header (toutes les pages) ---- */
  .category-bar{
    background:var(--surface);
    border-bottom:1px solid var(--border);
  }
  .category-bar-inner{
    max-width:1180px;
    margin:0 auto;
    padding:0.6rem 1.4rem;
    display:flex;
    gap:0.3rem;
    overflow-x:auto;
    scrollbar-width:thin;
  }
  .category-bar-inner::-webkit-scrollbar{ height:4px; }
  .category-bar-item{ position:relative; flex-shrink:0; }
  .category-bar-item > a{
    display:inline-block;
    font-family:inherit;
    font-size:0.83rem;
    font-weight:500;
    color:var(--text-2);
    text-decoration:none;
    padding:0.4rem 0.8rem;
    border-radius:999px;
    white-space:nowrap;
    transition:background 0.12s ease, color 0.12s ease;
  }
  .category-bar-item > a:hover{ background:var(--bg); color:var(--text); }

  /* Sous-catégories au survol (souris) — la catégorie reste cliquable même
     sans survol grâce au lien direct ci-dessus, ce menu n'est qu'un raccourci. */
  .category-bar-dropdown{
    display:none;
    flex-direction:column;
    position:absolute;
    top:100%;
    left:0;
    margin-top:2px;
    min-width:210px;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:12px;
    box-shadow:var(--shadow);
    padding:0.4rem;
    z-index:20;
  }
  .category-bar-dropdown.show{ display:flex; }
  .category-bar-dropdown a{
    font-size:0.84rem;
    font-weight:500;
    color:var(--text);
    text-decoration:none;
    padding:0.5rem 0.7rem;
    border-radius:8px;
    white-space:nowrap;
  }
  .category-bar-dropdown a:hover{ background:var(--bg); }

  /* ---- Layout ---- */
  .layout{
    max-width:1180px;
    margin:0 auto;
    padding:1.6rem 1.4rem 4rem;
    display:grid;
    grid-template-columns:230px 1fr;
    gap:1.8rem;
    align-items:start;
  }

  aside{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:1.1rem 1.1rem 1.3rem;
    position:sticky;
    top:5.4rem;
  }

  .aside-title{
    font-size:0.7rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.06em;
    color:var(--text-3);
    margin:0 0 0.7rem;
  }

  .cat-list{
    list-style:none;
    margin:0 0 1.3rem;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:0.1rem;
  }

  .cat-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:0.5rem;
    width:100%;
    background:none;
    border:none;
    text-align:left;
    font-family:inherit;
    font-size:0.87rem;
    color:var(--text);
    padding:0.45rem 0.4rem;
    border-radius:10px;
    cursor:pointer;
  }
  .cat-item:hover{ background:var(--bg); }
  .cat-item.active{ background:var(--accent-bg); color:var(--accent-dark); font-weight:600; }
  .cat-item .label{ display:flex; align-items:center; gap:0.55rem; }
  .cat-item .count{ font-size:0.76rem; color:var(--text-3); }
  .cat-item.active .count{ color:var(--accent-dark); }
  .cat-caret{ display:inline-block; width:0.7em; font-size:0.7em; color:var(--text-3); }

  .cat-sublist{
    list-style:none;
    margin:0.1rem 0 0.4rem;
    padding:0 0 0 1.1rem;
    display:flex;
    flex-direction:column;
    gap:0.1rem;
  }
  .cat-subitem{ font-size:0.83rem; }

  .price-fields{
    display:flex;
    gap:0.5rem;
  }
  .price-fields input{
    width:100%;
    font-family:inherit;
    font-size:0.85rem;
    padding:0.5rem 0.55rem;
    border:1px solid var(--border);
    border-radius:7px;
    color:var(--text);
  }
  .price-fields input:focus{ outline:2px solid var(--accent); outline-offset:0; }

  .seller-type-select{
    width:100%;
    font-family:inherit;
    font-size:0.85rem;
    padding:0.5rem 0.55rem;
    border:1px solid var(--border);
    border-radius:7px;
    color:var(--text);
    background:var(--surface);
  }
  .seller-type-select:focus{ outline:2px solid var(--accent); outline-offset:0; }

  .location-fields{ display:flex; flex-direction:column; gap:0.5rem; margin-bottom:1.3rem; }
  .location-fields input, .location-fields select{
    font-family:inherit;
    font-size:0.85rem;
    padding:0.5rem 0.55rem;
    border:1px solid var(--border);
    border-radius:7px;
    color:var(--text);
    width:100%;
  }
  .location-fields input:focus, .location-fields select:focus{ outline:2px solid var(--accent); outline-offset:0; }

  /* ---- Autocomplétion Ville (dépôt d'annonce, geo.api.gouv.fr) ---- */
  .city-field{ position:relative; }
  .city-suggestions{
    position:absolute; top:100%; left:0; right:0; margin-top:4px;
    background:var(--surface); border:1px solid var(--border); border-radius:12px;
    box-shadow:var(--shadow); z-index:15; max-height:220px; overflow-y:auto;
  }
  .city-suggestions[hidden]{ display:none; }
  .city-suggestion{
    display:block; width:100%; text-align:left; background:none; border:none;
    padding:0.55rem 0.8rem; font-family:inherit; font-size:0.85rem; cursor:pointer; color:var(--text);
  }
  .city-suggestion:hover, .city-suggestion.active{ background:var(--bg); }
  .city-suggestion .cs-detail{ color:var(--text-3); font-size:0.78rem; margin-left:0.3rem; }
  .location-fields button{
    font-family:inherit;
    font-size:0.82rem;
    font-weight:600;
    padding:0.5rem 0.6rem;
    border:1px solid var(--border);
    border-radius:999px;
    background:var(--surface);
    color:var(--text);
    cursor:pointer;
  }
  .location-fields button:hover{ background:var(--bg); }
  .location-fields #clearLocationBtn{ border:none; padding:0.2rem 0; font-weight:500; }
  .location-status{ font-size:0.78rem; color:var(--text-2); margin:0.1rem 0 0; min-height:1em; }

  .hint-text{ font-size:0.78rem; color:var(--text-3); margin:-0.3rem 0 0.85rem; }

  /* ---- Content ---- */
  .content-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:1.1rem;
    gap:0.8rem;
    flex-wrap:wrap;
  }

  .result-count{
    font-size:0.92rem;
    color:var(--text-2);
  }
  .result-count strong{ color:var(--text); }

  select#sort{
    font-family:inherit;
    font-size:0.85rem;
    padding:0.5rem 0.7rem;
    border:1px solid var(--border);
    border-radius:10px;
    background:var(--surface);
    color:var(--text);
  }
  select#sort:focus{ outline:2px solid var(--accent); outline-offset:0; }

  .save-search-btn{
    font-family:inherit; font-size:0.82rem; font-weight:600;
    background:none; border:1px solid var(--border); color:var(--text-2);
    padding:0.5rem 0.7rem; border-radius:999px; cursor:pointer;
  }
  .save-search-btn:hover{ background:var(--bg); color:var(--text); }

  .saved-search-row{
    display:flex; align-items:center; gap:0.6rem;
    padding:0.6rem 0.2rem; border-bottom:1px solid var(--border);
  }
  .saved-search-row:last-child{ border-bottom:none; }
  .saved-search-label{ flex:1; font-size:0.87rem; font-weight:500; color:var(--text); }

  .notification-row{
    display:block; width:100%; text-align:left;
    background:none; border:1px solid var(--border); border-radius:12px;
    padding:0.65rem 0.8rem; margin-bottom:0.4rem;
    font-family:inherit; font-size:0.85rem; color:var(--text-2); cursor:pointer;
  }
  .notification-row:hover{ background:var(--bg); }
  .notification-row.unread{ background:var(--accent-bg); color:var(--text); font-weight:500; border-color:var(--accent-bg); }

  .view-toggle{ display:flex; border:1px solid var(--border); border-radius:999px; overflow:hidden; }
  .view-btn{
    font-family:inherit; font-size:0.82rem; font-weight:600;
    padding:0.5rem 0.9rem; border:none; background:var(--surface); color:var(--text-2); cursor:pointer;
  }
  .view-btn + .view-btn{ border-left:1px solid var(--border); }
  .view-btn.active{ background:var(--accent-bg); color:var(--accent-dark); }

  .map-view{
    height:520px;
    border-radius:var(--radius);
    overflow:hidden;
    border:1px solid var(--border);
  }
  .map-popup{ width:180px; font-family:inherit; }
  .map-popup-photo{ aspect-ratio:4/3; border-radius:10px; overflow:hidden; background:#EFEEE7; margin-bottom:0.4rem; }
  .map-popup-photo img, .map-popup-photo svg{ width:100%; height:100%; object-fit:cover; display:block; }
  .map-popup-price{ font-weight:700; margin:0 0 0.15rem; }
  .map-popup-title{ font-size:0.85rem; margin:0 0 0.15rem; }
  .map-popup-city{ font-size:0.78rem; color:var(--text-3); margin:0 0 0.5rem; }
  .map-popup-btn{
    width:100%; font-family:inherit; font-size:0.78rem; font-weight:600;
    background:var(--accent); color:#fff; border:none; padding:0.4rem; border-radius:12px; cursor:pointer;
  }

  .grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
    gap:1.1rem 1rem;
  }

  .showcase-section{ margin-bottom:1.4rem; }
  .showcase-strip{
    display:flex;
    gap:1rem;
    overflow-x:auto;
    padding-bottom:0.4rem;
    margin-top:0.5rem;
  }
  .showcase-strip .showcase-card{
    flex:0 0 200px;
    border:1px solid var(--accent);
  }

  .card{
    position:relative;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius);
    overflow:hidden;
    cursor:pointer;
    text-decoration:none;
    color:inherit;
    transition:box-shadow 0.15s ease, transform 0.15s ease;
  }
  .card:hover{ box-shadow:var(--shadow); transform:translateY(-2px); }

  .card-photo{
    position:relative;
    aspect-ratio:4/3;
    background:#EFEEE7;
    overflow:hidden;
  }
  .card-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
  .card-photo svg{ width:100%; height:100%; display:block; }

  .fav-btn{
    position:absolute;
    top:8px; right:8px;
    width:30px; height:30px;
    border-radius:50%;
    background:rgba(255,255,255,0.92);
    border:none;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    color:var(--text-2);
    box-shadow:0 1px 3px rgba(0,0,0,0.15);
  }
  .fav-btn.active{ color:var(--accent); }
  .fav-btn:focus-visible{ outline:2px solid var(--accent-dark); }

  .modal-head-actions{ display:flex; align-items:center; gap:0.4rem; }
  .detail-fav-btn{
    position:static;
    width:30px; height:30px;
    background:var(--bg);
    box-shadow:none;
  }
  .detail-fav-btn.active{ color:var(--accent); }

  .card-badges{
    position:absolute;
    top:8px; left:8px;
    display:flex;
    gap:4px;
  }
  .tag{
    font-size:0.66rem;
    font-weight:700;
    padding:0.16rem 0.48rem;
    border-radius:99px;
    background:rgba(255,255,255,0.94);
    box-shadow:0 1px 3px rgba(0,0,0,0.1);
  }
  .tag-featured{ color:var(--accent-dark); }
  .tag-urgent{ color:#B23B3B; }
  .tag-status{ color:var(--text-2); }

  .card-owner-actions{
    position:absolute;
    top:8px; right:8px;
    display:flex;
    gap:4px;
  }
  .icon-btn{
    width:26px; height:26px;
    border-radius:50%;
    background:rgba(255,255,255,0.92);
    border:none;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    font-size:0.78rem;
    font-weight:700;
    color:var(--text-2);
    box-shadow:0 1px 3px rgba(0,0,0,0.15);
  }
  .icon-btn:hover{ color:var(--accent-dark); }
  .boost-btn{ color:#C9971F; }
  .urgent-btn{ color:#B23B3B; }
  .edit-btn{ color:var(--text-2); }

  .card-body{ padding:0.7rem 0.8rem 0.85rem; }

  .card-price{
    font-size:1.05rem;
    font-weight:700;
    margin:0 0 0.2rem;
  }

  .card-title{
    font-size:0.87rem;
    font-weight:500;
    margin:0 0 0.4rem;
    color:var(--text);
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    line-height:1.3;
    min-height:2.3em;
  }

  .card-meta{
    display:flex;
    align-items:center;
    gap:0.3rem;
    font-size:0.76rem;
    color:var(--text-3);
  }

  .empty{
    grid-column:1/-1;
    text-align:center;
    padding:3.5rem 1rem;
    color:var(--text-2);
  }
  .empty strong{ display:block; font-size:1.05rem; color:var(--text); margin-bottom:0.3rem; }

  /* ---- Modal ---- */
  .overlay{
    position:fixed; inset:0;
    background:rgba(28,28,26,0.5);
    display:none;
    align-items:flex-start;
    justify-content:center;
    z-index:30;
    padding:3vh 1rem;
    overflow-y:auto;
  }
  .overlay.open{ display:flex; }
  /* La connexion peut être déclenchée depuis n'importe quel autre panneau déjà
     ouvert (contacter le vendeur, déposer une annonce...) — elle doit donc
     toujours s'afficher au-dessus, quel que soit l'ordre des éléments dans le HTML. */
  #authOverlay{ z-index:40; }

  .modal{
    background:var(--surface);
    border-radius:20px;
    width:100%;
    max-width:460px;
    padding:1.5rem 1.5rem 1.7rem;
    box-shadow:0 20px 50px rgba(0,0,0,0.3);
  }

  .modal-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:1.1rem;
  }
  .modal h2{ font-size:1.15rem; margin:0; font-weight:700; }
  .close-x{
    background:none; border:none; cursor:pointer;
    color:var(--text-2);
    padding:4px;
    border-radius:50%;
  }
  .close-x:hover{ background:var(--bg); }

  .field{ margin-bottom:0.85rem; display:flex; flex-direction:column; gap:0.3rem; }
  .field label{
    font-size:0.78rem;
    font-weight:600;
    color:var(--text-2);
  }
  .field input[type="text"], .field input[type="email"], .field input[type="password"],
  .field input[type="tel"], .field input[type="number"], .field select, .field textarea{
    font-family:inherit;
    font-size:0.9rem;
    padding:0.6rem 0.7rem;
    border:1px solid var(--border);
    border-radius:8px;
    color:var(--text);
    background:var(--surface);
  }
  .field input:focus, .field select:focus, .field textarea:focus{
    outline:2px solid var(--accent);
    outline-offset:0;
  }
  textarea{ resize:vertical; min-height:70px; }
  .row2{ display:flex; gap:0.7rem; }
  .row2 > .field{ flex:1; }

  .checkbox-field{ margin-bottom:0.7rem; }
  .checkbox-label{
    display:flex !important;
    flex-direction:row !important;
    align-items:center;
    gap:0.5rem;
    font-size:0.85rem !important;
    font-weight:500 !important;
    color:var(--text) !important;
    cursor:pointer;
  }
  .checkbox-label input[type="checkbox"]{ width:16px; height:16px; accent-color:var(--accent); cursor:pointer; }

  input[type="file"]{ font-family:inherit; font-size:0.82rem; }
  input[type="file"]::file-selector-button{
    font-family:inherit;
    font-size:0.8rem;
    font-weight:600;
    background:var(--bg);
    border:1px solid var(--border);
    color:var(--text);
    padding:0.45rem 0.75rem;
    border-radius:999px;
    cursor:pointer;
    margin-right:0.6rem;
  }
  .photo-preview{ display:none; gap:6px; margin-top:0.5rem; flex-wrap:wrap; }
  .photo-thumb{ position:relative; }
  .photo-thumb img{ width:70px; height:70px; object-fit:cover; border-radius:12px; border:1px solid var(--border); display:block; background:var(--bg); }
  .photo-thumb-remove{
    position:absolute; top:-6px; right:-6px;
    width:20px; height:20px;
    border-radius:50%;
    background:var(--text);
    color:#fff;
    border:2px solid var(--surface);
    font-size:0.8rem;
    line-height:1;
    cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    padding:0;
  }
  .photo-thumb-remove:hover{ background:var(--accent-dark); }

  .err{
    font-size:0.8rem;
    color:var(--accent-dark);
    margin:-0.3rem 0 0.6rem;
    display:none;
  }
  .err.show{ display:block; }

  .modal-actions{
    display:flex;
    justify-content:flex-end;
    gap:0.6rem;
    margin-top:1.2rem;
  }
  .wizard-actions{ justify-content:space-between; }
  .wizard-nav-buttons{ display:flex; gap:0.6rem; }

  .wizard-progress{
    font-size:0.78rem;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:0.04em;
    color:var(--text-3);
    margin:-0.4rem 0 1rem;
  }
  .wizard-step{ display:none; }
  .wizard-step.active{ display:block; }
  .cancel-btn{
    font-family:inherit;
    font-size:0.87rem;
    font-weight:600;
    background:none;
    border:1px solid var(--border);
    color:var(--text);
    padding:0.6rem 1.05rem;
    border-radius:999px;
    cursor:pointer;
  }
  .cancel-btn:hover{ background:var(--bg); }

  .link-btn{
    font-family:inherit;
    font-size:0.82rem;
    font-weight:600;
    background:none;
    border:none;
    color:var(--accent-dark);
    padding:0;
    margin:-0.4rem 0 0.85rem;
    cursor:pointer;
    text-align:left;
  }
  .link-btn:hover{ text-decoration:underline; }

  @media (prefers-reduced-motion: reduce){ *{ transition:none !important; } }

  @media (max-width:820px){
    .layout{ grid-template-columns:1fr; }
    aside{ position:static; }
    .cat-list{ flex-direction:row; flex-wrap:wrap; }
    .cat-item{ width:auto; }
  }
  @media (max-width:560px){
    .header-inner{ flex-wrap:wrap; }
    .search-bar{ order:3; flex-basis:100%; max-width:none; }
    .post-btn{ padding:0.6rem 0.85rem; }
    .row2{ flex-direction:column; }
  }

  .load-msg{
    font-size:0.85rem;
    color:var(--accent-dark);
    background:var(--accent-bg);
    border-radius:8px;
    padding:0.55rem 0.8rem;
    margin:0 0 1rem;
    display:none;
  }
  .load-msg.show{ display:block; }

  /* ---- Compte ---- */
  .account-area{ flex-shrink:0; position:relative; }
  .account-btn{
    font-family:inherit;
    font-size:0.85rem;
    font-weight:600;
    background:none;
    border:1px solid var(--border);
    color:var(--text);
    padding:0.6rem 0.95rem;
    border-radius:999px;
    cursor:pointer;
    white-space:nowrap;
  }
  .account-btn:hover{ background:var(--bg); }
  .cart-btn{
    position:relative;
    flex-shrink:0;
    font-size:1rem;
    background:none;
    border:1px solid var(--border);
    padding:0.55rem 0.75rem;
    border-radius:999px;
    cursor:pointer;
    line-height:1;
  }
  .cart-btn:hover{ background:var(--bg); }
  .cart-badge{
    position:absolute; top:-6px; right:-6px;
    min-width:18px; height:18px; padding:0 4px;
    display:flex; align-items:center; justify-content:center;
    background:var(--accent); color:#fff; font-size:0.68rem; font-weight:700;
    border-radius:99px;
  }
  .verified-badge{
    display:inline-block;
    font-size:0.78rem; font-weight:700;
    color:#1a7a4c;
    background:#e5f5ec;
    padding:0.1rem 0.45rem;
    border-radius:6px;
  }
  .tag-sold{
    display:inline-block;
    background:var(--text); color:#fff;
    font-size:0.75rem; font-weight:700;
    padding:0.15rem 0.55rem;
    border-radius:6px;
    margin:-0.3rem 0 0.4rem;
  }
  .account-menu-wrap{ position:relative; }
  .account-dropdown{
    display:none;
    flex-direction:column;
    gap:0.1rem;
    position:absolute;
    right:0;
    top:calc(100% + 6px);
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:14px;
    box-shadow:var(--shadow);
    min-width:170px;
    padding:0.4rem;
    z-index:25;
  }
  .account-dropdown.open{ display:flex; }
  .account-dropdown button, .account-dropdown a{
    display:flex;
    align-items:center;
    text-align:left;
    background:none;
    border:none;
    font-family:inherit;
    font-size:0.85rem;
    padding:0.5rem 0.6rem;
    border-radius:10px;
    cursor:pointer;
    color:var(--text);
  }
  .account-dropdown button:hover, .account-dropdown a:hover{ background:var(--bg); }
  .pro-tag{ font-size:0.78rem; color:var(--ok); padding:0.5rem 0.6rem; font-weight:600; }

  .back-link{
    background:none; border:none; cursor:pointer;
    font-family:inherit; font-size:0.85rem; color:var(--text-2);
    padding:0.3rem 0;
  }
  .back-link:hover{ color:var(--accent-dark); }

  .pay-banner{ display:none; }
  .pay-banner.show{
    display:block;
    margin:0.8rem auto 0;
    max-width:1180px;
    padding:0.6rem 1.4rem;
    font-size:0.85rem;
    border-radius:0;
  }
  .pay-banner.ok{ background:var(--ok-bg); color:var(--ok); }
  .pay-banner.info{ background:var(--accent-bg); color:var(--accent-dark); }

  /* ---- Modals compte / paiement ---- */
  .modal.modal-sm{ max-width:340px; }
  .auth-tabs{ display:flex; gap:0.4rem; margin-bottom:1.1rem; }
  .auth-tab{
    flex:1;
    font-family:inherit; font-size:0.85rem; font-weight:600;
    padding:0.5rem; border:1px solid var(--border); background:var(--bg);
    border-radius:999px; cursor:pointer; color:var(--text-2);
  }
  .auth-tab.active{ background:var(--accent-bg); color:var(--accent-dark); border-color:var(--accent-bg); }

  .pay-desc{ font-size:0.85rem; color:var(--text-2); margin:0 0 1.1rem; }
  .pay-options{ display:flex; flex-direction:column; gap:0.7rem; }
  .pay-btn{
    font-family:inherit; font-weight:600; font-size:0.9rem;
    background:var(--accent); color:#fff; border:none;
    padding:0.7rem; border-radius:999px; cursor:pointer;
  }
  .pay-btn:hover{ background:var(--accent-dark); }
  .pay-btn:disabled{ opacity:0.6; cursor:default; }
  .pay-note{ font-size:0.8rem; color:var(--text-3); margin:0; }

  /* ---- Modal détail d'annonce ---- */
  .detail-modal{ max-width:480px; }
  .detail-photo{ margin-bottom:1rem; }
  .detail-photo > img, .detail-photo > svg{
    width:100%;
    aspect-ratio:4/3;
    object-fit:cover;
    display:block;
    border-radius:16px;
    background:#EFEEE7;
  }
  .detail-thumbs{ display:flex; gap:6px; margin-top:6px; }
  .detail-thumb{
    width:52px; height:52px;
    object-fit:cover;
    border-radius:10px;
    cursor:pointer;
    opacity:0.6;
    border:2px solid transparent;
  }
  .detail-thumb.active{ opacity:1; border-color:var(--accent); }
  .detail-price{ font-size:1.4rem; font-weight:700; margin:0 0 0.2rem; }
  .detail-meta{ font-size:0.85rem; color:var(--text-3); margin:0 0 1rem; }
  .dvf-note{
    font-size:0.85rem; color:var(--text-2); background:var(--bg);
    border-radius:12px; padding:0.7rem 0.9rem; margin:0 0 1rem; line-height:1.5;
  }
  .dvf-note strong{ color:var(--text); }
  .dvf-source{ font-size:0.74rem; color:var(--text-3); }
  .detail-desc{
    font-size:1rem;
    color:var(--text);
    line-height:1.65;
    white-space:pre-line;
    margin:0 0 1.2rem;
    padding:1.1rem 1.3rem;
    background:var(--bg);
    border-radius:14px;
  }
  .detail-seller{ font-size:0.85rem; color:var(--text-2); margin:0; padding-top:0.8rem; border-top:1px solid var(--border); }
  .detail-phone{ font-size:0.88rem; margin:0.5rem 0 0; }
  .detail-phone a{ color:var(--accent-dark); font-weight:600; }

  /* Fenêtre détail plus grande + mise en page 2 colonnes façon leboncoin
     à partir d'une largeur suffisante (photo/infos en haut, description
     en pleine largeur en dessous). En dessous de ce seuil, tout reste
     empilé dans l'ordre du DOM (identique à avant ce changement). */
  @media (min-width:760px){
    .detail-modal{
      max-width:920px;
      display:grid;
      grid-template-columns:1.3fr 1fr;
      column-gap:2rem;
    }
    .detail-modal > .modal-head,
    .detail-modal > .detail-desc,
    .detail-modal > .detail-seller,
    .detail-modal > .detail-phone,
    .detail-modal > .detail-buy,
    .detail-modal > .detail-contact,
    .detail-modal > .detail-owner-options,
    .detail-modal > .report-link{
      grid-column:1 / -1;
    }
    .detail-photo > img, .detail-photo > svg{ border-radius:18px; }
    .detail-info{ padding-top:0.2rem; }
  }

  /* ---- Pages SEO (annonce.php / categorie.php) ---- */
  .annonce-page{ max-width:760px; margin:0 auto; padding:1.6rem 1.4rem 4rem; }
  .annonce-breadcrumb{ font-size:0.82rem; color:var(--text-3); margin:0 0 1rem; }
  .annonce-breadcrumb a{ color:var(--text-2); }
  .annonce-breadcrumb a:hover{ color:var(--accent-dark); }
  .annonce-title{ font-size:1.4rem; font-weight:700; margin:0 0 1rem; letter-spacing:-0.01em; }
  .annonce-gallery{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));
    gap:0.6rem;
    margin-bottom:1.2rem;
  }
  .annonce-gallery img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:14px; display:block; background:#EFEEE7; }
  .annonce-cta{ display:inline-flex; margin-top:1.2rem; }

  /* ---- Pages légales (mentions-legales.php / cgu.php / confidentialite.php) ---- */
  .legal-page h2{ font-size:1.05rem; font-weight:700; margin:1.6rem 0 0.6rem; letter-spacing:-0.005em; }
  .legal-page h2:first-of-type{ margin-top:0.4rem; }
  .legal-page p, .legal-page ul{ font-size:0.92rem; line-height:1.65; color:var(--text-2); margin:0 0 0.9rem; }
  .legal-page ul{ padding-left:1.3rem; }
  .legal-page li{ margin-bottom:0.35rem; }
  .legal-page strong{ color:var(--text); }
  .legal-page a{ color:var(--accent-dark); }
  .legal-page a:hover{ text-decoration:underline; }
  .legal-page a.post-btn{ color:#fff; }
  .legal-page a.post-btn:hover{ text-decoration:none; }

  /* ---- Pied de page (liens légaux) ---- */
  .site-footer{
    max-width:1180px;
    margin:0 auto;
    padding:1.6rem 1.4rem 2.4rem;
    border-top:1px solid var(--border);
  }
  .footer-links{
    display:flex;
    flex-wrap:wrap;
    gap:0.4rem 1.2rem;
    font-size:0.82rem;
  }
  .footer-links a{ color:var(--text-2); text-decoration:none; }
  .footer-links a:hover{ color:var(--accent-dark); text-decoration:underline; }

  /* ---- Bandeau d'information cookies ---- */
  .cookie-banner{
    position:fixed;
    left:1rem; right:1rem; bottom:1rem;
    max-width:640px;
    margin:0 auto;
    background:var(--text);
    color:#fff;
    padding:0.9rem 1.1rem;
    border-radius:14px;
    box-shadow:0 12px 30px rgba(0,0,0,0.25);
    z-index:50;
    display:flex;
    align-items:center;
    gap:0.9rem;
    flex-wrap:wrap;
  }
  .cookie-banner[hidden]{ display:none; }
  .cookie-banner p{ flex:1; min-width:220px; margin:0; font-size:0.82rem; line-height:1.5; color:#fff; }
  .cookie-banner a{ color:#fff; text-decoration:underline; }
  .cookie-banner button{
    font-family:inherit; font-weight:600; font-size:0.85rem;
    background:#fff; color:var(--text); border:none;
    padding:0.5rem 1rem; border-radius:999px; cursor:pointer; flex-shrink:0;
  }
  .cookie-banner button:hover{ background:var(--accent-bg); color:var(--accent-dark); }
  @media (max-width:560px){
    .cookie-banner{ flex-direction:column; align-items:stretch; text-align:center; }
    .cookie-banner button{ width:100%; }
  }

  .detail-owner-options{ margin-top:1rem; padding-top:1rem; border-top:1px solid var(--border); }
  .owner-options-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0.5rem; margin-top:0.5rem; }
  .owner-options-grid button{
    font-family:inherit; font-size:0.82rem; padding:0.6rem 0.5rem;
    border:1px solid var(--border); border-radius:12px; background:#fff; cursor:pointer;
  }
  .owner-options-grid button:hover{ border-color:var(--accent); color:var(--accent); }
  #detailDeleteBtn:hover{ border-color:#c0392b; color:#c0392b; }
  .detail-views{ margin-top:0.6rem; font-size:0.8rem; color:var(--text-2); }

  /* ---- Page annonce dédiée (/annonce/{id}/{slug}) ----
     Réutilise exactement le même balisage/JS que la fenêtre de détail
     (favoris, contacter, panier, options vendeur…), affiché comme une vraie
     page plutôt que comme une popup par-dessus l'accueil : pas de fond
     sombre, pas de recadrage centré, la grille d'annonces reste en mémoire
     mais masquée. */
  body.single-listing-mode .layout,
  body.single-listing-mode .showcase-section,
  body.single-listing-mode .homepage-banner,
  body.single-listing-mode #paymentBanner{
    display:none;
  }
  body.single-listing-mode #detailOverlay{
    position:static;
    display:block;
    background:none;
    padding:1.5rem 1rem 4rem;
    z-index:auto;
    overflow:visible;
  }
  body.single-listing-mode .detail-modal{ margin:0 auto; }
  body.single-listing-mode #detailClose{ display:none; }
  body.single-listing-mode .annonce-breadcrumb{ max-width:920px; margin:1.5rem auto 0; padding:0 1rem; }

  /* ---- Page dépôt d'annonce dédiée (/deposer) ----
     Même principe que .single-listing-mode ci-dessus, appliqué cette fois
     à #overlay (l'assistant de dépôt) plutôt qu'à #detailOverlay : affiché
     comme une vraie page, pas une popup par-dessus l'accueil. */
  body.deposer-page-mode .layout,
  body.deposer-page-mode .showcase-section,
  body.deposer-page-mode .homepage-banner,
  body.deposer-page-mode #paymentBanner{
    display:none;
  }
  body.deposer-page-mode #overlay{
    position:static;
    display:block;
    background:none;
    padding:1.5rem 1rem 4rem;
    z-index:auto;
    overflow:visible;
  }
  body.deposer-page-mode #overlay .modal{ margin:0 auto; max-width:640px; }
  body.deposer-page-mode #cancelModal{ display:none; }

  .detail-contact{ margin-top:0.8rem; }
  .contact-compose{ margin-top:0.6rem; display:flex; flex-direction:column; gap:0.5rem; }
  .contact-compose textarea{
    font-family:inherit; font-size:0.87rem; padding:0.6rem 0.7rem;
    border:1px solid var(--border); border-radius:8px; resize:vertical; min-height:70px;
  }
  .report-link{
    display:block; margin-top:1rem;
    background:none; border:none; font-family:inherit; font-size:0.78rem;
    color:var(--text-3); cursor:pointer; padding:0;
  }
  .report-link:hover{ color:var(--accent-dark); }

  .account-shortcuts{ display:flex; flex-wrap:wrap; gap:0.5rem; margin-bottom:1.3rem; }
  .account-shortcuts button{
    font-family:inherit; font-size:0.82rem; font-weight:600;
    background:var(--bg); border:1px solid var(--border); color:var(--text);
    padding:0.5rem 0.8rem; border-radius:99px; cursor:pointer;
  }
  .account-shortcuts button:hover{ background:var(--accent-bg); color:var(--accent-dark); }

  .account-stats{ display:flex; flex-wrap:wrap; gap:0.5rem 1.2rem; margin-bottom:1.3rem; font-size:0.85rem; color:var(--text-2); }

  .account-invoices{ margin-bottom:1.3rem; }
  .invoice-row{
    display:flex; justify-content:space-between; align-items:center;
    padding:0.55rem 0.2rem; border-bottom:1px solid var(--border);
    font-size:0.85rem; color:var(--text); text-decoration:none;
  }
  .invoice-row:hover{ color:var(--accent-dark); }
  .invoice-row:last-child{ border-bottom:none; }
  .account-connect{ margin-bottom:1.3rem; }

  /* ---- Panier ---- */
  .cart-group{
    border:1px solid var(--border);
    border-radius:14px;
    padding:1rem;
    margin-bottom:1rem;
  }
  .cart-row{
    display:flex; justify-content:space-between; align-items:center; gap:0.6rem;
    padding:0.4rem 0; font-size:0.85rem; border-bottom:1px solid var(--border);
  }
  .cart-row:last-of-type{ border-bottom:none; }
  .cart-delivery-tag{ color:var(--text-2); font-size:0.78rem; }
  .cart-subtotal{ border-top:1px solid var(--border); border-bottom:none; margin-top:0.3rem; padding-top:0.6rem; }
  .cart-pay-btn{ width:100%; justify-content:center; margin-top:0.7rem; }

  /* ---- Messagerie ---- */
  .messages-modal{ max-width:460px; }
  .menu-badge{
    display:inline-flex; align-items:center; justify-content:center;
    min-width:18px; height:18px; padding:0 5px;
    background:var(--accent); color:#fff; font-size:0.7rem; font-weight:700;
    border-radius:99px; margin-left:auto;
  }
  .empty-hint{ font-size:0.87rem; color:var(--text-2); text-align:center; padding:1.5rem 0; }

  #conversationList{ display:flex; flex-direction:column; gap:0.4rem; max-height:60vh; overflow-y:auto; }
  .conversation-row{
    display:flex; align-items:center; gap:0.7rem;
    width:100%; text-align:left;
    background:none; border:1px solid var(--border); border-radius:14px;
    padding:0.6rem 0.7rem; cursor:pointer; font-family:inherit;
  }
  .conversation-row:hover{ background:var(--bg); }
  .conv-photo{ width:44px; height:44px; border-radius:12px; overflow:hidden; background:#EFEEE7; flex-shrink:0; }
  .conv-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
  .conv-info{ flex:1; min-width:0; }
  .conv-title{ font-size:0.87rem; font-weight:600; margin:0; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .conv-other{ font-size:0.78rem; color:var(--text-3); margin:0.1rem 0; }
  .conv-preview{ font-size:0.8rem; color:var(--text-2); margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

  .thread-heading{ font-size:0.87rem; font-weight:600; margin:0.6rem 0 0.8rem; color:var(--text); }
  .thread-messages{
    display:flex; flex-direction:column; gap:0.5rem;
    max-height:45vh; overflow-y:auto; padding:0.4rem 0.2rem; margin-bottom:0.8rem;
  }
  .msg-bubble{
    max-width:80%; padding:0.55rem 0.75rem; border-radius:16px; font-size:0.87rem; line-height:1.4;
    white-space:pre-line; word-break:break-word;
  }
  .msg-bubble.theirs{ align-self:flex-start; background:var(--bg); color:var(--text); border-bottom-left-radius:6px; }
  .msg-bubble.mine{ align-self:flex-end; background:var(--accent); color:#fff; border-bottom-right-radius:6px; }
  .thread-compose{ display:flex; gap:0.5rem; align-items:flex-end; }
  .thread-compose textarea{
    flex:1; font-family:inherit; font-size:0.87rem; padding:0.55rem 0.7rem;
    border:1px solid var(--border); border-radius:8px; resize:none; min-height:44px;
  }

  .detail-attrs{ margin:0 0 1rem; }
  .attrs-table{ width:100%; border-collapse:collapse; font-size:0.85rem; }
  .attrs-table th, .attrs-table td{ text-align:left; padding:0.35rem 0.5rem 0.35rem 0; border-bottom:1px solid var(--border); }
  .attrs-table th{ font-weight:500; color:var(--text-2); width:55%; }
  .attrs-table td{ font-weight:600; color:var(--text); }
  .attrs-table tr:last-child th, .attrs-table tr:last-child td{ border-bottom:none; }

  /* ---- Boutiques pro ---- */
  .header-nav-link{
    font-family:inherit;
    font-weight:600;
    font-size:0.9rem;
    color:var(--text-2);
    text-decoration:none;
    white-space:nowrap;
    flex-shrink:0;
    transition:color 0.12s ease;
  }
  .header-nav-link:hover{ color:var(--text); }

  .ok-msg{
    font-size:0.8rem;
    color:var(--ok);
    background:var(--ok-bg);
    padding:0.6rem 0.8rem;
    border-radius:8px;
    margin:-0.3rem 0 0.9rem;
    display:none;
  }
  .ok-msg.show{ display:block; }

  .btn-reject{
    background:none;
    border:1px solid var(--border);
    color:var(--accent-dark);
    font-family:inherit;
    font-weight:600;
    font-size:0.85rem;
    padding:0.6rem 1rem;
    border-radius:999px;
    cursor:pointer;
  }
  .btn-reject:hover{ background:var(--accent-bg); }

  .store-edit-form{ max-width:520px; }
  .store-disable-form{ margin-top:1.2rem; }
  .store-current-logo{ width:64px; height:64px; object-fit:cover; border-radius:10px; display:block; margin:0.3rem 0; }
  .store-current-banner{ width:100%; max-width:400px; height:100px; object-fit:cover; border-radius:10px; display:block; margin:0.3rem 0; }

  .store-banner{
    width:100%;
    height:220px;
    background-size:cover;
    background-position:center;
    background-color:#EFEEE7;
  }

  .store-header{
    display:flex;
    align-items:center;
    gap:1rem;
    margin:1.2rem 0 0.6rem;
  }
  .store-logo{
    width:80px;
    height:80px;
    object-fit:cover;
    border-radius:14px;
    border:1px solid var(--border);
    background:var(--surface);
    flex-shrink:0;
  }
  .store-description{
    font-size:0.9rem;
    color:var(--text-2);
    line-height:1.55;
    margin:0 0 1.2rem;
    max-width:720px;
  }

  .store-search{
    width:100%;
    max-width:360px;
    padding:0.68rem 0.9rem;
    border:1px solid var(--border);
    border-radius:999px;
    font-family:inherit;
    font-size:0.9rem;
    margin-bottom:1.2rem;
    background:var(--surface);
  }
  .store-search:focus{ outline:none; border-color:var(--accent); }

  .store-directory-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
    gap:1rem;
  }
  .store-card{
    display:flex;
    align-items:center;
    gap:0.8rem;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:0.9rem;
    text-decoration:none;
    color:inherit;
    transition:box-shadow 0.12s ease;
  }
  .store-card:hover{ box-shadow:var(--shadow); }
  .store-card-logo{
    width:56px;
    height:56px;
    border-radius:12px;
    background:var(--bg);
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    flex-shrink:0;
  }
  .store-card-logo img{ width:100%; height:100%; object-fit:cover; }
  .store-card-logo-placeholder{ font-size:1.5rem; }
  .store-card-name{ font-weight:700; font-size:0.94rem; margin:0 0 0.15rem; }
  .store-card-desc{ font-size:0.8rem; color:var(--text-2); margin:0 0 0.3rem; }
  .store-legal-table{ max-width:420px; margin:0 0 1.2rem; }

  /* ---- Conciergerie ---- */
  .field input[type="date"]{
    font-family:inherit;
    font-size:0.9rem;
    padding:0.6rem 0.7rem;
    border:1px solid var(--border);
    border-radius:8px;
    color:var(--text);
  }
  .field input[type="date"]:focus{ outline:2px solid var(--accent); outline-offset:0; }

  .status-tag{ font-size:0.72rem; font-weight:700; padding:0.15rem 0.5rem; border-radius:99px; text-transform:capitalize; display:inline-block; }
  .status-nouvelle{ background:#FFF4DE; color:#946200; }
  .status-confirmee, .status-en_cours{ background:var(--accent-bg); color:var(--accent-dark); }
  .status-terminee{ background:var(--ok-bg); color:var(--ok); }
  .status-annulee{ background:var(--bg); color:var(--text-3); }

  .concierge-table-wrap{ overflow-x:auto; margin-bottom:1.4rem; }
  .concierge-table{ width:100%; border-collapse:collapse; font-size:0.85rem; }
  .concierge-table th, .concierge-table td{ text-align:left; padding:0.55rem 0.7rem; border-bottom:1px solid var(--border); }
  .concierge-table th{ color:var(--text-2); font-weight:600; font-size:0.78rem; text-transform:uppercase; letter-spacing:0.02em; }
  .concierge-table .row-actions form{ display:inline-flex; }

  .concierge-form{ max-width:560px; margin-bottom:1.6rem; }

  .concierge-lead{ font-size:0.95rem; max-width:680px; margin-bottom:1.2rem; }
  .concierge-cta{ display:inline-block; margin-bottom:2rem; text-decoration:none; }

  .concierge-cat-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:0.9rem; margin-bottom:1.8rem; }
  .concierge-cat-card{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:1rem 1.1rem;
  }
  .concierge-cat-card h3{ margin:0 0 0.35rem; font-size:0.95rem; }
  .concierge-cat-card p{ margin:0; font-size:0.82rem; color:var(--text-2); }

  .concierge-steps{ font-size:0.9rem; color:var(--text-2); padding-left:1.2rem; max-width:680px; }
  .concierge-steps li{ margin-bottom:0.4rem; }