/* CECIF responsive — ticket B0a (2026-04-28, V3)
 * Refonte mobile complète :
 *  - Bandeau fixed top, sidebar (#column) déplacée APRÈS #content via flex order
 *  - Menu nav mobile en 5 boutons texte (sprites désactivés, span affichés)
 *  - Annonces vignettes 1 par ligne, images agrandies
 *  - Annuaire 1 catégorie par ligne
 *  - Champs de recherche tactiles (font 16px, padding 12px)
 *  - Borne globale overflow-x: hidden + bornage pubs/iframes
 */

@media (max-width: 768px) {
  /* === BORNE GLOBALE === */
  html { overflow-x: hidden; }
  body {
    overflow-x: hidden !important;
    max-width: 100vw;
    font-size: 15px;
    line-height: 1.5;
    padding-top: 56px; /* libère l'espace du bandeau fixed top */
  }

  /* === BANDEAU EN HAUT, FIXED === */
  body > div[style*="2563eb"] {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99999;
    margin: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  }

  /* === CONTENEURS RACINE === */
  #wrapper, #header, #footer, .content-wide {
    width: 100% !important;
    box-sizing: border-box;
    float: none !important;
  }
  #wrapper {
    background-image: none;
    padding: 0;
    margin: 0;
  }
  #header {
    height: auto !important;
    padding: 8px;
    text-align: center;
  }
  #logo, #logo a:link, #logo a:visited {
    float: none !important;
    margin: 0 auto !important;
  }
  #top-menu {
    float: none !important;
    width: 100% !important;
    text-align: center;
    margin-top: 8px;
    font-size: 13px;
  }
  #top-menu a { display: inline-block; padding: 4px 6px; }

  /* === MENU NAV MOBILE : 5 boutons texte (annule sprites) === */
  #nav {
    float: none !important;
    width: 100% !important;
    height: auto !important;
    margin: 12px 0 0 0 !important;
    padding: 0;
    background-image: none !important;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    list-style: none;
  }
  #nav li,
  #nav li.nav1, #nav li.nav2, #nav li.nav3,
  #nav li.nav4, #nav li.nav5 {
    float: none !important;
    display: block !important;
    flex: 1 1 calc(33% - 4px);
    margin: 0 !important;
    list-style: none;
  }
  #nav li a,
  #nav li.nav1 a, #nav li.nav2 a, #nav li.nav3 a,
  #nav li.nav4 a, #nav li.nav5 a {
    display: block !important;
    width: auto !important;
    height: auto !important;
    padding: 12px 8px !important;
    background: #444 !important;
    background-image: none !important;
    text-indent: 0 !important;
    font-size: 14px;
    font-weight: bold;
    color: #fff !important;
    text-align: center;
    text-decoration: none;
    border: none !important;
    border-radius: 4px;
  }
  #nav li a:hover,
  #nav li a:focus { background: #555 !important; }
  #nav li#current a,
  #nav li.current a { background: #2563eb !important; }
  #nav li a span {
    display: inline !important;
    text-indent: 0 !important;
    color: #fff !important;
  }

  /* === PAGE : sidebar APRÈS contenu via flex order === */
  #page {
    padding: 0 8px !important;
    overflow: visible !important;
    display: flex;
    flex-direction: column;
  }
  #content {
    width: 100% !important;
    float: none !important;
    order: 1;
  }
  #column {
    width: 100% !important;
    float: none !important;
    margin: 24px 0 0 0 !important;
    order: 2;
  }

  /* === FORMULAIRE DE RECHERCHE — bien visible === */
  form[name="rechercher"] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    background: rgba(255,255,255,0.96);
    border-radius: 4px;
    margin: 12px 0;
  }
  form[name="rechercher"] select,
  form[name="rechercher"] input[type=text] {
    width: 100% !important;
    padding: 12px !important;
    font-size: 16px !important; /* >= 16 pour éviter zoom iOS */
    height: auto !important;
    box-sizing: border-box;
    border: 1px solid #bbb;
    border-radius: 4px;
    background: #fff;
  }
  form[name="rechercher"] label[for="in"] {
    display: block;
    text-align: center;
    color: #555;
    font-size: 13px;
    margin: 0;
  }
  form[name="rechercher"] input#search-input {
    width: 100% !important;
    max-width: 100%;
    height: 48px !important;
    padding: 0;
    object-fit: contain;
  }
  .urls-recherche {
    font-size: 13px;
    line-height: 1.6;
    word-wrap: break-word;
  }
  .urls-recherche a { display: inline-block; padding: 2px 4px; }

  /* === PUBS / IFRAMES TIERS (cause #1 du débordement) === */
  ins.adsbygoogle, .adsbygoogle, ins[style*="width"] {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
  }
  iframe, embed, object {
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* === BOXES CECIF — empilées, fond simple === */
  .home-box, .big-box, .big-box-wide, .big-box-pub,
  .small-box, .small-box-dark, .small-box-pub,
  .annonces, .annonces.premium,
  .tabs, .tabs-box, .tabs-list, .tabs-list-outer {
    width: auto !important;
    max-width: 100% !important;
    background-image: none !important;
    box-sizing: border-box;
    float: none !important;
    margin: 0 0 12px 0 !important;
    padding: 12px !important;
    border-radius: 4px;
  }

  /* === ANNONCES (.image-thumbnails) : 1 par ligne, image agrandie === */
  .image-thumbnails {
    list-style: none;
    padding: 0 !important;
    margin: 0 !important;
  }
  .image-thumbnails li {
    width: 100% !important;
    height: auto !important;
    margin: 0 0 16px 0 !important;
    padding: 8px 0;
    float: none !important;
    display: block !important;
    border-bottom: 1px solid #ddd;
  }
  .image-thumbnails div.photo-wrapper {
    width: 100% !important;
    height: 200px !important;
    box-sizing: border-box;
    border: 1px solid #ddd !important;
    background: #fff !important;
    margin: 0 0 8px 0 !important;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .image-thumbnails li img {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
  }
  .image-thumbnails li a {
    display: block;
    font-size: 15px !important;
    line-height: 1.4 !important;
    text-align: center;
  }

  /* === ANNUAIRE (.secteur) : 1 ligne par catégorie === */
  .secteurs1, .secteurs2 {
    width: 100% !important;
    float: none !important;
    box-sizing: border-box;
    margin: 0 !important;
    padding: 0 !important;
  }
  .secteur {
    width: 100% !important;
    box-sizing: border-box;
    float: none !important;
    overflow: visible !important;
    display: block !important;
    margin: 0 !important;
    padding: 12px 8px !important;
    border-bottom: 1px solid #ddd;
  }
  .secteur .num {
    display: inline-block !important;
    width: auto !important;
    font-size: 13px;
    color: #888;
    margin: 0 8px 0 0 !important;
    padding: 0 !important;
    float: none !important;
  }
  .secteur .num a { color: #888; }
  .secteur .name {
    display: inline-block !important;
    width: auto !important;
    font-size: 16px;
    font-weight: bold;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
  }
  .secteur .name a { color: #2563eb; }
  .secteur .taxi {
    display: block !important;
    width: 100% !important;
    margin: 6px 0 0 0 !important;
    padding: 0 !important;
    font-size: 13px;
    line-height: 1.7;
    color: #666;
    float: none !important;
  }

  /* === TABLES INTERNES === */
  #content table, #column table {
    display: block;
    overflow-x: auto;
    max-width: 100%;
  }
  #content td, #content th { word-wrap: break-word; }

  /* === FORMULAIRES GÉNÉRIQUES === */
  input[type=text], input[type=email], input[type=password],
  input[type=tel], input[type=url], input[type=search],
  input[type=number], select, textarea {
    width: 100% !important;
    box-sizing: border-box;
    font-size: 16px;
    padding: 10px;
  }

  /* === IMAGES === */
  img { max-width: 100%; height: auto; }

  /* === FOOTER === */
  #footer {
    padding: 16px 8px !important;
    background-image: none !important;
    clear: both;
  }
  #footer p {
    padding: 0;
    margin: 8px 0;
    word-wrap: break-word;
    font-size: 12px;
    line-height: 1.7;
  }
  #footer a { display: inline-block; padding: 2px 4px; }

  /* === TYPOGRAPHIE === */
  h1, h2, h3, h4, a, p, li {
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  h1 { font-size: 22px; line-height: 1.3; }
  h2 { font-size: 18px; line-height: 1.3; }
  h3 { font-size: 16px; line-height: 1.3; }
}

/* === V4 (2026-04-28) — fixes itération 4 === */
@media (max-width: 768px) {
  /* Logo CECIF visible en texte sur mobile (annule text-indent:-9000px) */
  #logo {
    text-align: center;
    margin: 0 auto !important;
    padding: 8px 0;
    width: 100%;
  }
  #logo a:link, #logo a:visited {
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
    text-indent: 0 !important;
    font-size: 32px !important;
    font-weight: bold;
    color: #2563eb !important;
    letter-spacing: 3px;
    text-decoration: none !important;
    border: none !important;
    margin: 0 !important;
    padding: 4px 12px;
  }

  /* Réduire l'espace pris par les vignettes vides : 200px -> 120px */
  .image-thumbnails div.photo-wrapper {
    height: 120px !important;
  }

  /* Boutons nav plus tactiles */
  #nav li a,
  #nav li.nav1 a, #nav li.nav2 a, #nav li.nav3 a,
  #nav li.nav4 a, #nav li.nav5 a {
    padding: 14px 8px !important;
    font-size: 15px !important;
    min-height: 44px; /* hit area tactile minimum Apple HIG */
  }

  /* Top 5 pays — drapeaux alignés à gauche */
  ul.top-countries {
    list-style: none;
    padding: 0 !important;
    margin: 8px 0 !important;
  }
  ul.top-countries li {
    padding: 10px 8px 10px 36px !important;
    background-repeat: no-repeat !important;
    background-position: 6px center !important;
    background-size: 22px auto !important;
    margin: 0 !important;
    border-bottom: 1px solid #eee;
    font-size: 14px;
    line-height: 1.4;
    list-style: none;
  }
  ul.top-countries li a {
    display: block;
    color: inherit;
    text-decoration: none;
  }

  /* Autres listes Top 5 (achats, ventes, produits, entreprises) */
  ul.top-achats, ul.top-ventes, ul.top-produits, ul.top-entreprises {
    list-style: none;
    padding: 0 !important;
    margin: 8px 0 !important;
  }
  ul.top-achats li, ul.top-ventes li,
  ul.top-produits li, ul.top-entreprises li {
    padding: 10px 8px !important;
    border-bottom: 1px solid #eee;
    font-size: 14px;
    line-height: 1.4;
    list-style: none;
    margin: 0 !important;
    width: 100%;
    box-sizing: border-box;
  }
  ul.top-achats li a, ul.top-ventes li a,
  ul.top-produits li a, ul.top-entreprises li a {
    display: block;
    text-decoration: none;
  }
}

/* === V5 (2026-04-28) — logo image au lieu de texte === */
@media (max-width: 768px) {
  #logo {
    text-align: center;
    width: 100%;
    margin: 0 auto !important;
    padding: 8px 0;
  }
  #logo a:link, #logo a:visited {
    display: inline-block !important;
    width: 200px !important;
    height: 60px !important;
    text-indent: -9000px !important;
    background-image: url(../img/logo-cecif.png) !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: contain !important;
    background-color: transparent !important;
    color: transparent !important;
    font-size: 0 !important;
    border: none !important;
    margin: 0 auto !important;
    padding: 0 !important;
    letter-spacing: 0 !important;
  }
}

/* === V6 (2026-04-28) — headers CSS pur (tout le site) + fixes mobile === */

/* === HORS @media : remplace les headers à images arrondies par du CSS pur === */
/* S'applique aussi en desktop (Mat : "convertir cela en CSS pour tout le site") */
.small-box, .small-box-dark, .big-box, .big-box-wide, .home-box {
  background-image: none !important;
  background-color: #f5f5f5 !important;
  color: #333 !important;
  border: 1px solid #d0d0d0;
  border-radius: 6px;
  padding: 0 !important;
  margin: 0 0 16px 0 !important;
  overflow: hidden;
}
.small-box h2, .small-box-dark h2, .big-box h2,
.big-box-wide h2, .home-box h2 {
  background-image: none !important;
  background-color: #515b6a;
  color: #fff !important;
  padding: 12px 16px !important;
  margin: 0 !important;
  font-size: 16px !important;
  font-weight: bold;
  text-shadow: none !important;
  height: auto !important;
  line-height: 1.3 !important;
  border: none !important;
}
.small-box h2 a, .small-box-dark h2 a, .big-box h2 a,
.big-box-wide h2 a, .home-box h2 a {
  color: #fff !important;
  text-decoration: none !important;
}

/* h3 (sous-titres : "Vous voulez EXPORTER", "Dernières offres ACHAT", etc.) */
.small-box h3, .small-box-dark h3, .big-box h3, .home-box h3 {
  background-image: none !important;
  background-color: transparent !important;
  color: #2563eb !important;
  padding: 8px 16px !important;
  margin: 12px 0 4px 0 !important;
  font-size: 15px !important;
  border-bottom: 1px solid #e0e0e0;
  height: auto !important;
}
.small-box h3 strong, .big-box h3 strong, .home-box h3 strong {
  color: #2563eb;
}
.small-box h3 a, .big-box h3 a, .home-box h3 a {
  color: #2563eb !important;
  text-decoration: none !important;
}

/* Contenu interne des boxes : padding latéral pour ne pas coller aux bords */
.small-box > *:not(h2):not(ul):not(.tabs-list-outer),
.small-box-dark > *:not(h2):not(ul):not(.tabs-list-outer),
.big-box > *:not(h2):not(ul):not(.tabs-list-outer),
.home-box > *:not(h2):not(ul):not(.tabs-list-outer) {
  padding-left: 16px;
  padding-right: 16px;
}

/* === DANS @media (mobile-only) === */
@media (max-width: 768px) {

  /* === Top blocs : icônes alignées à gauche + texte plus grand === */
  ul.top-produits, ul.top-entreprises,
  ul.top-achats, ul.top-ventes {
    list-style: none;
    padding: 0 !important;
    margin: 0 !important;
  }
  ul.top-produits li, ul.top-entreprises li,
  ul.top-achats li, ul.top-ventes li {
    padding: 12px 12px 12px 40px !important;
    background-repeat: no-repeat !important;
    background-position: 10px center !important;
    background-size: 22px auto !important;
    margin: 0 !important;
    border-bottom: 1px solid #eee;
    font-size: 15px !important;
    line-height: 1.4 !important;
    list-style: none;
    width: 100%;
    box-sizing: border-box;
  }
  ul.top-produits li:last-child, ul.top-entreprises li:last-child,
  ul.top-achats li:last-child, ul.top-ventes li:last-child {
    border-bottom: none;
  }
  ul.top-produits li a, ul.top-entreprises li a,
  ul.top-achats li a, ul.top-ventes li a {
    display: block;
    padding: 0 !important;
    text-decoration: none !important;
    color: #2563eb !important;
    font-size: 15px !important;
  }

  /* === ANNONCES : vignettes intelligentes === */
  /* Cas 1 : "pas de photo" → compact horizontal 80x80 + titre à droite */
  .image-thumbnails li:has(img[src*="pas-de-photo"]) {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 10px 0 !important;
    margin: 0 !important;
    border-bottom: 1px solid #eee;
    height: auto !important;
  }
  .image-thumbnails li:has(img[src*="pas-de-photo"]) .photo-wrapper {
    width: 80px !important;
    height: 80px !important;
    min-width: 80px;
    flex: 0 0 80px;
    margin: 0 !important;
    border: 1px solid #e0e0e0 !important;
    background: #fafafa !important;
    border-radius: 4px;
  }
  .image-thumbnails li:has(img[src*="pas-de-photo"]) .photo-wrapper img {
    width: 60px !important;
    height: 60px !important;
    margin: 10px !important;
    object-fit: contain !important;
  }
  .image-thumbnails li:has(img[src*="pas-de-photo"]) > a {
    flex: 1;
    text-align: left !important;
    color: #999 !important;
    font-style: italic;
    font-size: 14px !important;
  }
  .image-thumbnails li:has(img[src*="pas-de-photo"]) > a:empty::before {
    content: "Sans titre";
  }

  /* Cas 2 : vraie image → pleine largeur agrandie */
  .image-thumbnails li:has(img:not([src*="pas-de-photo"])) {
    display: block !important;
    margin: 0 0 24px 0 !important;
    padding: 8px 0 !important;
    border-bottom: 2px solid #eee;
  }
  .image-thumbnails li:has(img:not([src*="pas-de-photo"])) .photo-wrapper {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16/9;
    border: 1px solid #d0d0d0 !important;
    border-radius: 4px;
    overflow: hidden;
    margin: 0 0 8px 0 !important;
    display: block !important;
    background: #fff !important;
  }
  .image-thumbnails li:has(img:not([src*="pas-de-photo"])) .photo-wrapper img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    object-fit: cover !important;
    display: block;
  }
  .image-thumbnails li:has(img:not([src*="pas-de-photo"])) > a {
    display: block;
    text-align: center;
    font-size: 16px !important;
    font-weight: 500;
    color: #2563eb !important;
    text-decoration: none;
    padding: 4px 8px;
  }

  /* === Annuaire : meilleur découpage === */
  .secteur {
    padding: 16px 12px !important;
    border-bottom: none !important;
    border-top: 1px solid #e8e8e8;
    margin: 0 !important;
  }
  .secteur:first-child { border-top: none; }
  .secteur .num {
    font-size: 13px !important;
    color: #999 !important;
    margin: 0 10px 0 0 !important;
    font-weight: normal;
  }
  .secteur .num a { color: #999 !important; }
  .secteur .name {
    font-size: 17px !important;
    font-weight: bold;
  }
  .secteur .taxi {
    display: block !important;
    margin: 10px 0 0 0 !important;
    padding: 0 !important;
    line-height: 1.8 !important;
    color: #555 !important;
    font-size: 14px !important;
    word-break: normal;
  }
  .secteur .taxi a {
    display: inline-block;
    padding: 2px 0;
    color: #2563eb !important;
  }
}

/* === V7 (2026-04-28) — fix .secteur height fixe (cause troncature) === */
/* Hors @media : applique aussi en desktop (Mat : "convertir cela en CSS pour tout le site") */
.secteur {
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}
.secteur p {
  height: auto !important;
  overflow: visible !important;
}
.secteur .taxi {
  height: auto !important;
  overflow: visible !important;
  white-space: normal !important;
  text-overflow: clip !important;
}

/* === V8 (2026-04-28) — fix icônes top blocs : répétition verticale + lignes vides === */
/* Hors @media : applique à tout le site (desktop + mobile) */

/* Bug default.css : .top-achats/.top-ventes/.top-produits oublient no-repeat
   → l'icône puce-*.gif se répète sur toute la hauteur des <li> vides */
.top-achats li, .top-ventes li, .top-produits li {
  background-repeat: no-repeat !important;
}

/* Quand l'annonce/produit/entreprise n'existe pas, <li><a></a></li> reste vide.
   Cacher ces lignes pour ne pas afficher l'icône esseulée
   (Safari iOS 16.4+, Chrome 105+, Firefox 121+) */
.top-achats li:has(a:empty),
.top-ventes li:has(a:empty),
.top-produits li:has(a:empty),
.top-entreprises li:has(a:empty),
.top-countries li:has(a:empty) {
  display: none !important;
}

/* === V9 (2026-04-28) — fix icônes top blocs visibles + thumbs non pixélisées === */
@media (max-width: 768px) {
  /* Icônes A/V/P : taille native (l'image puce-*.gif fait 300x64, scale auto = bandeau).
     Padding-left assez grand pour voir l'icône à gauche. */
  ul.top-produits li, ul.top-entreprises li,
  ul.top-achats li, ul.top-ventes li {
    padding: 14px 12px 14px 56px !important;
    background-size: auto !important;       /* annule le 22px du V6 */
    background-position: 8px center !important;
    background-repeat: no-repeat !important;
    min-height: 44px;
    box-sizing: border-box;
    overflow: hidden;
  }

  /* Annonces avec vraie image : taille raisonnable (~100px) au lieu de pleine largeur
     étirée. Les thumbs sont 64x64 — étirement à 360px = pixellisation 6x.
     Affichage type "carte" : image moyenne à gauche + titre à droite. */
  .image-thumbnails li:has(img:not([src*="pas-de-photo"])) {
    display: flex !important;
    align-items: center;
    gap: 14px;
    margin: 0 !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid #eee !important;
  }
  .image-thumbnails li:has(img:not([src*="pas-de-photo"])) .photo-wrapper {
    width: 100px !important;
    height: 100px !important;
    min-width: 100px;
    flex: 0 0 100px;
    aspect-ratio: 1 !important;
    margin: 0 !important;
    border: 1px solid #d0d0d0 !important;
    border-radius: 4px;
    overflow: hidden;
    background: #fff !important;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .image-thumbnails li:has(img:not([src*="pas-de-photo"])) .photo-wrapper img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    object-fit: cover !important;
    display: block;
  }
  .image-thumbnails li:has(img:not([src*="pas-de-photo"])) > a {
    flex: 1;
    text-align: left !important;
    font-size: 15px !important;
    font-weight: 500;
    color: #2563eb !important;
    text-decoration: none;
    padding: 0 !important;
  }
}

/* === V10 (2026-04-28) — badges CSS pur A/V/P (remplace puce-*.gif 300x64 buggés) === */
@media (max-width: 768px) {
  /* Annule l'image puce-*.gif (300x64 avec fond pâle qui déborde sur la <li>) */
  ul.top-achats li,
  ul.top-ventes li,
  ul.top-produits li {
    background-image: none !important;
    background-color: transparent !important;
    padding: 12px 12px 12px 12px !important;
  }

  /* Badges colorés A/V/P en CSS pur, même largeur que les drapeaux (24px) */
  ul.top-achats li::before,
  ul.top-ventes li::before,
  ul.top-produits li::before {
    display: inline-block;
    width: 24px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    color: #fff;
    font-weight: bold;
    font-size: 12px;
    font-family: Verdana, Arial, sans-serif;
    margin-right: 10px;
    border-radius: 2px;
    vertical-align: middle;
  }
  ul.top-achats li::before { content: "A"; background-color: #16a34a; } /* vert */
  ul.top-ventes li::before { content: "V"; background-color: #dc2626; } /* rouge */
  ul.top-produits li::before { content: "P"; background-color: #9333ea; } /* violet */
}

/* === V11 (2026-04-28) — unifier titres annonces + agrandir photos === */
@media (max-width: 768px) {
  /* Style unifié des titres (peu importe si l'image existe ou est "pas-de-photo") */
  .image-thumbnails li > a,
  .image-thumbnails li:has(img[src*="pas-de-photo"]) > a,
  .image-thumbnails li:has(img:not([src*="pas-de-photo"])) > a {
    color: #2563eb !important;
    font-style: normal !important;
    font-weight: 500 !important;
    font-size: 15px !important;
    text-align: left !important;
    text-decoration: none;
  }

  /* Le ::before "Sans titre" ne doit s'afficher QUE si l'<a> est vide */
  .image-thumbnails li > a:not(:empty)::before {
    content: none !important;
  }

  /* Agrandir les photos quand elles existent (régression V9 100x100 -> 140x140) */
  .image-thumbnails li:has(img:not([src*="pas-de-photo"])) .photo-wrapper {
    width: 140px !important;
    height: 140px !important;
    min-width: 140px;
    flex: 0 0 140px;
  }
}

/* === V12 (2026-04-28) — badges A/V/P avec dégradé + lumière + ombre (3D look) === */
@media (max-width: 768px) {
  ul.top-achats li::before,
  ul.top-ventes li::before,
  ul.top-produits li::before {
    display: inline-block;
    width: 24px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    color: #fff !important;
    font-weight: bold;
    font-size: 13px;
    font-family: Verdana, Arial, sans-serif;
    margin-right: 10px;
    border-radius: 3px;
    vertical-align: middle;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.55),  /* highlight haut intérieur */
      inset 0 -2px 0 rgba(0, 0, 0, 0.18),       /* ombre bas intérieur */
      0 1px 2px rgba(0, 0, 0, 0.35);            /* ombre portée extérieure */
    border: 1px solid rgba(0, 0, 0, 0.22);
  }

  /* ACHAT = dégradé vert */
  ul.top-achats li::before {
    content: "A";
    background: linear-gradient(180deg, #4ade80 0%, #22c55e 45%, #15803d 100%);
  }

  /* VENTE = dégradé rouge */
  ul.top-ventes li::before {
    content: "V";
    background: linear-gradient(180deg, #f87171 0%, #dc2626 45%, #991b1b 100%);
  }

  /* PRODUIT = dégradé violet/magenta (cohérent avec l'icône legacy) */
  ul.top-produits li::before {
    content: "P";
    background: linear-gradient(180deg, #e879f9 0%, #c026d3 45%, #86198f 100%);
  }
}

/* === V13 (2026-04-28) — badge + titre sur la même ligne === */
@media (max-width: 768px) {
  /* Annule le display:block hérité de V6 — garde tout inline avec le badge ::before */
  ul.top-achats li a,
  ul.top-ventes li a,
  ul.top-produits li a {
    display: inline !important;
    vertical-align: middle;
    padding: 0 !important;
  }
}

/* === V14 (2026-04-28) — uniformisation totale annonces === */
@media (max-width: 768px) {
  /* RESET annule tous les flex/dimensions précédents */
  .image-thumbnails {
    list-style: none;
    padding: 0 !important;
    margin: 0 !important;
  }
  .image-thumbnails li {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 0 20px 0 !important;
    padding: 8px 0 !important;
    border-bottom: 1px solid #eee !important;
    flex: none !important;
    gap: 0 !important;
    align-items: stretch !important;
  }

  /* Wrapper photo PLEINE LARGEUR, hauteur fixe 200px, contient l'image centrée */
  .image-thumbnails .photo-wrapper,
  .image-thumbnails li:has(img[src*="pas-de-photo"]) .photo-wrapper,
  .image-thumbnails li:has(img:not([src*="pas-de-photo"])) .photo-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 200px !important;
    min-width: 0 !important;
    flex: none !important;
    aspect-ratio: auto !important;
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
    background: #f8f8f8 !important;
    border: 1px solid #d0d0d0 !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    box-sizing: border-box;
    position: static !important;
  }

  /* Vraie image : pleine largeur, object-fit cover (le swap JS V12 charge la HD) */
  .image-thumbnails li:has(img:not([src*="pas-de-photo"])) .photo-wrapper img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    object-fit: cover !important;
    flex: none !important;
    position: static !important;
    transform: none !important;
    display: block !important;
  }

  /* Pas-de-photo : centré, 80x80 max, jamais étiré */
  .image-thumbnails .photo-wrapper img[src*="pas-de-photo"] {
    width: 80px !important;
    height: 80px !important;
    max-width: 80px !important;
    max-height: 80px !important;
    margin: 0 !important;
    object-fit: contain !important;
    flex: none !important;
    position: static !important;
    transform: none !important;
    display: block !important;
  }

  /* Titre UNIFORME (peu importe pas-de-photo ou vraie image) */
  .image-thumbnails li > a,
  .image-thumbnails li:has(img[src*="pas-de-photo"]) > a,
  .image-thumbnails li:has(img:not([src*="pas-de-photo"])) > a {
    display: block !important;
    width: 100% !important;
    flex: none !important;
    text-align: center !important;
    padding: 4px 8px !important;
    color: #2563eb !important;
    font-style: normal !important;
    font-weight: 500 !important;
    font-size: 15px !important;
    text-decoration: none !important;
  }

  /* "Sans titre" pour les <a> vides (placeholder) */
  .image-thumbnails li > a:empty::before {
    content: "Sans titre";
    color: #999 !important;
    font-style: italic;
    font-weight: normal;
  }
}