/* ============================================================
   Le Griot d'Abidjan – Petites annonces Côte d'Ivoire
   CSS ultra-léger, mobile-first, optimisé 2G/3G
   ============================================================ */
:root{
  --vert:#009A44;
  --vert-fonce:#007A36;
  --orange:#F77F00;
  --fond:#F4F5F3;
  --texte:#1F2937;
  --muted:#6B7280;
  --blanc:#FFFFFF;
  --bord:#E5E7EB;
  --radius:12px;
  --ombre:0 1px 3px rgba(0,0,0,.08);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  background:var(--fond);color:var(--texte);line-height:1.55;font-size:16px;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--vert-fonce);text-decoration:none}
a:hover{text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:0 14px}

/* ---------- Header ---------- */
.site-header{background:var(--blanc);border-bottom:1px solid var(--bord);position:sticky;top:0;z-index:50}
.header-inner{max-width:1100px;margin:0 auto;padding:8px 14px;display:flex;align-items:center;gap:10px}
.logo{display:flex;align-items:center;gap:8px;font-weight:800;font-size:18px;color:var(--texte)}
.logo-badge{background:var(--vert);color:#fff;width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:19px}
.logo small{display:block;font-size:10px;font-weight:600;color:var(--muted);letter-spacing:.4px}
.header-actions{margin-left:auto;display:flex;align-items:center;gap:8px}
.btn{
  display:inline-flex;align-items:center;gap:6px;border:0;cursor:pointer;
  padding:9px 14px;border-radius:9px;font-size:14px;font-weight:700;line-height:1;
}
.btn-vert{background:var(--vert);color:#fff}
.btn-vert:hover{background:var(--vert-fonce);text-decoration:none}
.btn-ghost{background:transparent;color:var(--muted);border:1px solid var(--bord);font-weight:600}
.btn-ghost:hover{color:var(--vert-fonce);border-color:var(--vert);text-decoration:none}

/* ---------- Bandeau Ivoire Hosting (design original ivoirannonces.com) ---------- */
.ivh-bar{
  width:100%;
  background:#000;
  border-top:3px solid #F77F00;
  border-bottom:3px solid #009E60;
  padding:10px 15px;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:15px;
  flex-wrap:wrap;
  text-align:center;
  font-family:Arial,sans-serif;
}
.ivh-bar-text{color:#fff;font-size:16px;line-height:1.4}
.ivh-bar-text strong{color:#F77F00}
.ivh-bar-btn{
  background:#009E60;color:#fff;padding:8px 18px;border-radius:20px;
  text-decoration:none;font-weight:bold;white-space:nowrap;
}
.ivh-bar-btn:hover{background:#006b40;text-decoration:none}
@media (max-width:640px){
  .ivh-bar{flex-direction:column;gap:10px;padding:12px}
  .ivh-bar-text{font-size:14px}
  .ivh-bar-btn{width:100%;max-width:280px;box-sizing:border-box}
}

/* ---------- Espaces publicitaires Google ---------- */
.ad-slot{
  min-height:90px;margin:18px 0;background:#fff;border:1px dashed var(--bord);
  border-radius:12px;display:flex;align-items:center;justify-content:center;
}
.ad-slot-label{color:var(--muted);font-size:11px;letter-spacing:2px;text-transform:uppercase}
.ad-slot[data-slot="top"]{margin-top:0}
/* Los anuncios AdSense ocupan todo el ancho (evita "availableWidth=0") */
ins.adsbygoogle{display:block !important;width:100% !important}
/* Casilla publicitaria de la rejilla: se define MÁS ABAJO, en una sola regla y con el centrado
   (`justify-self:center`). Aquí había otra regla vieja y quedaban dos iguales, que confundía al
   leer el fichero y al comprobar cuál manda (en CSS gana la última). Se quitó el 28/09/2026. */

/* ---------- Ver todas / cargar más ---------- */
.global-action{text-align:center;margin:18px 0}
.btn-mas{
  background:var(--vert);color:#fff;border:0;border-radius:10px;padding:12px 24px;
  font-size:15px;font-weight:800;cursor:pointer;display:inline-flex;align-items:center;gap:8px;
}
.btn-mas:hover{background:var(--vert-fonce)}

/* ---------- Botones OAuth (Facebook / Google) ---------- */
.oauth-sep{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13px;margin:14px 0 10px}
.oauth-sep::before,.oauth-sep::after{content:"";flex:1;height:1px;background:var(--bord)}
.oauth-buttons{display:flex;flex-direction:column;gap:8px}
.btn-oauth{
  display:flex;align-items:center;justify-content:center;gap:8px;padding:11px;border-radius:9px;
  font-size:14px;font-weight:700;border:1px solid var(--bord);background:#fff;color:var(--texte);
}
.btn-oauth:hover{text-decoration:none;box-shadow:var(--ombre)}
.btn-oauth-fb:hover{border-color:#1877F2;color:#1877F2}
.btn-oauth-google:hover{border-color:#DB4437;color:#DB4437}

/* ---------- Connexion ---------- */
.auth-nom{font-size:13px;font-weight:700;color:var(--vert-fonce);white-space:nowrap}

/* ---------- Carte promo Ivoire Hosting (footer, design original) ---------- */
.promo-box{
  border:2px solid #ff6a00;
  border-radius:8px;
  padding:16px;
  text-align:center;
  background-color:#202020;
}
.promo-title{color:#ff6a00;font-weight:800;font-size:1.1rem;margin-bottom:4px}
.promo-subtitle{font-size:1.2rem;font-weight:700;color:#ffffff;margin-bottom:8px}
.promo-box p{font-size:0.8rem;margin-bottom:4px;color:#bbbbbb}
.btn-promo{
  background-color:#008751;color:#ffffff;padding:8px 16px;border-radius:6px;
  text-decoration:none;font-weight:700;display:inline-block;margin-top:8px;
}
.btn-promo:hover{background-color:#006b40;text-decoration:none}

/* ---------- Hero ---------- */
.hero{background:linear-gradient(180deg,#E8F5EE,#F4F5F3);padding:26px 0 18px;text-align:center}
.hero h1{font-size:26px;line-height:1.25;font-weight:800;margin-bottom:6px}
.hero h1 span{color:var(--vert)}
.hero p{color:var(--muted);font-size:15px;max-width:560px;margin:0 auto}
.hero .badge-ci{display:inline-block;background:#fff;border:1px solid var(--bord);border-radius:999px;padding:3px 12px;font-size:12px;font-weight:700;color:var(--vert-fonce);margin-bottom:10px}

/* ---------- Recherche ---------- */
.search-wrap{margin-top:16px}
.search-form{display:flex;gap:8px;max-width:620px;margin:0 auto}
.search-input{
  flex:1;padding:13px 14px;border:1px solid var(--bord);border-radius:10px;font-size:16px;
  background:#fff;min-width:0;
}
.search-btn{background:var(--vert);color:#fff;border:0;border-radius:10px;padding:0 18px;font-size:16px;font-weight:700;cursor:pointer;white-space:nowrap}
.search-btn:hover{background:var(--vert-fonce)}

/* ---------- Catégories ---------- */
.cats{display:flex;gap:8px;overflow-x:auto;padding:14px 0 6px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.cats::-webkit-scrollbar{display:none}
.cat-chip{
  flex:0 0 auto;display:flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--bord);
  border-radius:999px;padding:8px 14px;font-size:14px;font-weight:700;color:var(--texte);cursor:pointer;white-space:nowrap;
}
.cat-chip.active{background:var(--vert);border-color:var(--vert);color:#fff}
.cat-chip .emo{font-size:16px}

/* ---------- Grille d'annonces ---------- */
.section-title{font-size:26px;font-weight:800;margin:20px 0 12px;line-height:1.2;letter-spacing:-.2px}
.section-title small{font-weight:600;color:var(--muted);font-size:13px}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.card{
  background:#fff;border:1px solid var(--bord);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--ombre);display:flex;flex-direction:column;
}
.card:hover{box-shadow:0 4px 12px rgba(0,0,0,.12);text-decoration:none}
.card-media{aspect-ratio:4/3;background:var(--fond);display:flex;align-items:center;justify-content:center;position:relative}
.card-media img{width:100%;height:100%;object-fit:cover}
.card-tile{font-size:44px}
.card-body{padding:9px 10px 11px;display:flex;flex-direction:column;gap:3px;flex:1}
.card-cat{font-size:11px;font-weight:700;color:var(--vert-fonce);text-transform:uppercase;letter-spacing:.4px}
.card-title{font-size:14px;font-weight:700;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-prix{font-size:15px;font-weight:800;color:var(--vert)}
.card-prix.note{color:var(--orange)}
.card-meta{font-size:12px;color:var(--muted);display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.urgent-tag{background:#FEE2E2;color:#B91C1C;font-size:10px;font-weight:800;padding:1px 7px;border-radius:999px;text-transform:uppercase}
.result-count{font-size:13px;color:var(--muted);margin:4px 0 10px}
.no-result{background:#fff;border:1px dashed var(--bord);border-radius:var(--radius);padding:26px;text-align:center;color:var(--muted)}
.btn-retry{margin-top:10px;background:var(--vert);color:#fff;border:0;border-radius:9px;padding:10px 16px;font-weight:700;cursor:pointer}

/* ---------- CTA publier ---------- */
.cta{
  margin:22px 0;background:var(--vert);color:#fff;border-radius:14px;padding:22px 16px;text-align:center;
}
.cta h2{font-size:20px;margin-bottom:4px}
.cta p{font-size:14px;opacity:.95;margin-bottom:14px}
.cta .btn-wa{background:#fff;color:var(--vert-fonce);padding:12px 20px;border-radius:10px;font-weight:800;display:inline-flex;align-items:center;gap:8px}
.cta .btn-tel{background:rgba(255,255,255,.18);color:#fff;padding:12px 20px;border-radius:10px;font-weight:700;margin-left:8px;border:1px solid rgba(255,255,255,.5)}
.cta a:hover{text-decoration:none;opacity:.95}

/* ---------- Comment ça marche ---------- */
.how{background:#fff;border:1px solid var(--bord);border-radius:14px;padding:18px 14px;margin:0 0 22px}
.how h2{font-size:19px;margin-bottom:12px}
.how ol{list-style:none;counter-reset:step}
.how li{counter-increment:step;display:flex;gap:12px;align-items:flex-start;padding:8px 0;font-size:15px}
.how li::before{
  content:counter(step);flex:0 0 26px;height:26px;border-radius:50%;background:var(--fond);
  color:var(--vert-fonce);font-weight:800;display:flex;align-items:center;justify-content:center;font-size:14px;
}

/* ---------- Footer ---------- */
.site-footer{background:#14331F;color:#D7E5DC;margin-top:26px;padding:26px 0 20px;font-size:14px}
.footer-grid{display:grid;grid-template-columns:1fr;gap:18px}
.footer-grid h3{color:#fff;font-size:15px;margin-bottom:8px}
.footer-grid a{color:#D7E5DC;display:block;padding:2px 0}
.footer-grid a:hover{color:#fff}
.footer-bottom{border-top:1px solid rgba(255,255,255,.15);margin-top:18px;padding-top:12px;font-size:12px;color:#9FB8A8;text-align:center}
.footer-bottom a{color:#D7E5DC}
.footer-bottom a:hover{color:#fff}

/* ---------- Page annonce (statique) ---------- */
.ad-page{padding:16px 0 30px}
.ad-back{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:700;color:var(--muted);margin-bottom:12px}
.ad-card{background:#fff;border:1px solid var(--bord);border-radius:14px;padding:18px 16px;box-shadow:var(--ombre)}
.ad-cat{font-size:12px;font-weight:800;color:var(--vert-fonce);text-transform:uppercase;letter-spacing:.5px}
.ad-photo{margin-bottom:14px}
.gal-main img{width:100%;border-radius:12px;aspect-ratio:4/3;object-fit:cover;background:var(--fond);cursor:zoom-in}
.gal-thumbs{display:flex;gap:8px;margin-top:8px;overflow-x:auto}
.gal-thumbs img{width:74px;height:56px;object-fit:cover;border-radius:8px;cursor:pointer;border:2px solid transparent;flex:0 0 auto;background:var(--fond)}
.gal-thumbs img:hover{border-color:var(--vert)}
/* Lightbox galerie */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.92);display:none;align-items:center;justify-content:center;z-index:999;cursor:zoom-out}
.lightbox.on{display:flex}
.lightbox img{max-width:94vw;max-height:88vh;border-radius:8px}
.lightbox-close{position:absolute;top:14px;right:20px;color:#fff;font-size:30px;cursor:pointer;line-height:1}
.ad-title{font-size:22px;font-weight:800;line-height:1.25;margin:4px 0 8px}
.ad-prix{font-size:24px;font-weight:800;color:var(--vert)}
.ad-prix.note{color:var(--orange)}
.ad-meta{display:flex;gap:14px;flex-wrap:wrap;color:var(--muted);font-size:13px;margin:8px 0 14px;padding-bottom:12px;border-bottom:1px solid var(--bord)}
.ad-desc{font-size:16px;white-space:pre-line;margin-bottom:18px}
.ad-actions{display:flex;flex-direction:column;gap:10px}
.btn-call,.btn-wa-big{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px;border-radius:10px;font-size:16px;font-weight:800;color:#fff}
.btn-call{background:var(--vert)}
.btn-wa-big{background:#25D366;color:#075E54}
.ad-actions a:hover{text-decoration:none;opacity:.93}
.ad-share{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--bord);border-radius:10px;padding:11px;font-size:14px;font-weight:700;cursor:pointer;color:var(--texte)}
.ad-note{font-size:12px;color:var(--muted);text-align:center;margin-top:10px}

/* ---------- Landing pages & fil d'ariane ---------- */
.breadcrumb{font-size:13px;color:var(--muted);margin-bottom:10px}
.breadcrumb a{color:var(--muted)}
.breadcrumb a:hover{color:var(--vert-fonce)}
.landing-h1{font-size:24px;font-weight:800;line-height:1.25;margin-bottom:12px}
.landing-intro{background:#fff;border:1px solid var(--bord);border-radius:12px;padding:14px 16px;margin-bottom:16px;font-size:15px}
.landing-intro p{margin-bottom:8px}
.landing-intro p:last-child{margin-bottom:0}
.seo-text h2{margin-bottom:10px}

/* ---------- Liens populaires (portada) ---------- */
.pop-links{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.pop-links a{background:#fff;border:1px solid var(--bord);border-radius:999px;padding:7px 13px;font-size:13px;font-weight:700;color:var(--texte)}
.pop-links a:hover{border-color:var(--vert);color:var(--vert-fonce);text-decoration:none}

/* ---------- Formulaire de publication ---------- */
.form-card{background:#fff;border:1px solid var(--bord);border-radius:14px;padding:16px;box-shadow:var(--ombre);max-width:640px}
.field{margin-bottom:12px}
.field label{display:block;font-size:13px;font-weight:700;margin-bottom:4px;color:var(--texte)}
.inp{
  width:100%;padding:11px 12px;border:1px solid var(--bord);border-radius:9px;font-size:15px;
  background:#fff;color:var(--texte);font-family:inherit;
}
.inp:focus{outline:2px solid var(--vert);outline-offset:0;border-color:var(--vert)}
textarea.inp{resize:vertical}
.form-row{display:grid;grid-template-columns:1fr;gap:0 10px}
.check{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600}
.check input{width:18px;height:18px;accent-color:var(--vert)}
.form-actions{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.form-note{font-size:12px;color:var(--muted);margin-top:12px;line-height:1.5}
.honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- Desktop ---------- */
@media (min-width:640px){
  .form-row{grid-template-columns:1fr 1fr;gap:10px}
  .form-actions{flex-direction:row}
  .form-actions .btn-call,.form-actions .btn-wa-big{flex:1}
}
@media (min-width:640px){
  .grid{grid-template-columns:repeat(3,1fr);gap:14px}
  .hero h1{font-size:34px}
  .footer-grid{grid-template-columns:repeat(3,1fr)}
  .ad-actions{flex-direction:row}
  .ad-actions .btn-call,.ad-actions .btn-wa-big{flex:1}
}
@media (min-width:960px){
  .grid{grid-template-columns:repeat(4,1fr)}
}

/* ---- IH-MARCA: cambios de estilo pedidos el 26/09/2026 ---- */
/* Los enlaces ya no se subrayan ni al pasar por encima. */
a:hover, a:focus{text-decoration:none}
/* Boton naranja: el que se usa para depositar un anuncio. */
.btn-orange{background:var(--orange);color:#fff}
.btn-orange:hover{background:#D96E00;color:#fff;text-decoration:none}
/* Las dos fotos de la marca en la cabecera. */
.logo-marca{width:40px;height:40px;object-fit:contain;display:block}
.logo-texto{height:34px;width:auto;display:block}
@media (max-width:640px){
  .logo-marca{width:32px;height:32px}
  .logo-texto{height:26px}
}

/* ---- IH-TARJETA-NUEVA: la tarjeta de anuncio del diseño nuevo (26/09/2026) ----
   Los tamaños son los de Jiji (el portal que manda en Costa de Marfil), que es lo que se
   aprobó en la maqueta: precio 14 px y título 13 px en peso normal. Lo que hacía que
   parecieran grandes no era el tamaño, era la negrita. */
.card{display:flex;flex-direction:column;background:#fff;border:1px solid #ebf2f7;border-radius:12px;
      overflow:hidden;text-decoration:none;color:#28363e;box-shadow:0 1px 3px rgba(0,0,0,.06);
      transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.card-media{position:relative;aspect-ratio:4/3;background:var(--fond);overflow:hidden;
      display:block;align-items:stretch;justify-content:flex-start}
.card-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.card-tile{font-size:44px}
.card-cintas{position:absolute;top:6px;left:6px;display:flex;gap:4px;flex-wrap:wrap;max-width:76%;z-index:2}
/* Abajo: «Urgent» y el número de fotos (27/09/2026). */
.card-cintas.abajo{top:auto;bottom:6px;align-items:flex-end}
.card-cinta{font-size:10px;font-weight:800;padding:2px 7px;border-radius:999px;
      background:rgba(255,255,255,.94);color:#374151;box-shadow:0 1px 2px rgba(0,0,0,.12)}
.card-cinta.urgent{background:#B91C1C;color:#fff}
.card-cinta.una{background:var(--orange);color:#fff}
.card-cinta.pro{background:#1D4ED8;color:#fff}
/* El «Pro vérifié» en AZUL, como estaba (lo pidió el cliente el 27/09/2026). */
.card-cinta.verif{background:#1D4ED8;color:#fff}
/* La boutique con color propio: antes era el mismo naranja que «À la une» y se confundían. */
.card-cinta.bq{background:#6D28D9;color:#fff}
/* (Aquí hubo un rato el «Pro vérifié» en verde; el cliente pidió el 27/09/2026 dejarlo en el azul
   de antes, así que la regla que manda es la de la línea 317.) */
/* El corazón, POR ENCIMA de la capa oscura «Voir l'annonce».
   Sin este `z-index` la capa (que va después en el HTML) se lo comía y el corazón no se podía
   pulsar: el clic abría el anuncio. Lo avisó el cliente el 27/09/2026. */
.card-fav{position:absolute;top:auto;bottom:6px;right:6px;width:28px;height:28px;border-radius:999px;
      background:rgba(255,255,255,.94);display:flex;align-items:center;justify-content:center;
      font-size:14px;box-shadow:0 1px 2px rgba(0,0,0,.12);cursor:pointer;line-height:1;z-index:3}
/* Y la capa oscura no intercepta el ratón: quien lo recibe es la tarjeta (que es un enlace), así
   que pulsar «Voir l'annonce» abre el anuncio igual, pero el corazón y los sellos quedan libres. */
.card-velo{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
      background:rgba(0,0,0,.3);opacity:0;transition:opacity .22s ease;pointer-events:none}
.card-velo span{display:block;background:var(--vert);color:#fff;font-size:12.5px;font-weight:700;
      padding:9px 15px;border-radius:999px;box-shadow:0 3px 10px rgba(0,0,0,.3);
      transform:translateY(6px);transition:transform .22s ease}
.card-body{padding:9px 10px 11px;display:flex;flex-direction:column;gap:2px}
.card-prix{font-size:14px;font-weight:700;color:var(--vert);line-height:1.25}
.card-prix small{display:block;font-size:10.5px;font-weight:400;color:var(--muted)}
.card-prix.note{color:var(--muted);font-weight:700}
.card-unidad{font-size:11px;font-weight:400;color:var(--muted)}
.card-title{font-size:13px;font-weight:400;color:#28363e;line-height:1.35;
      display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-atrib{font-size:11.5px;color:#6c8ea0}
.card-meta{font-size:11.5px;color:#6c8ea0;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
/* «À la une»: naranja claro, el naranja de la marca, para que se note a la legua */
.card.una{border-color:#FFCC80;background:#FFF3E0}
.card.una:hover{border-color:var(--orange)}
/* Al pasar el ratón: se levanta, la foto hace zoom, el borde se pone verde y sale el botón */
.card:hover{transform:translateY(-6px);box-shadow:0 14px 28px rgba(0,0,0,.15);border-color:var(--vert)}
.card:hover .card-media img{transform:scale(1.07)}
.card:hover .card-title{color:var(--vert-fonce)}
.card:hover .card-velo{opacity:1}
.card:hover .card-velo span{transform:translateY(0)}
.card:active{transform:translateY(-2px) scale(.995)}
/* En pantallas sin ratón el velo no sirve de nada, y a quien le molesten las animaciones
   no se le anima nada. */
@media (hover:none){.card-velo{display:none}}
@media (prefers-reduced-motion:reduce){
  .card,.card-media img,.card-velo,.card-velo span{transition:none}
  .card:hover{transform:none}
  .card:hover .card-media img{transform:none}
  .card-velo{display:none}
}

/* ---- IH-PORTADA-ARRGLOS (26/09/2026) ---- */
/* 4. Las categorías: ver más abajo, en IH-CATEGORIAS (en una línea, con flechas). */
/* 2. El título de la tarjeta, en negrita. */
.card-title{font-weight:700;color:#1f2937}
/* 3. El hueco de publicidad tiene la misma forma que una tarjeta (caja 4:3 arriba, pie abajo),
   así no descuadra la fila ni se queda más alto ni más bajo que los anuncios de al lado.
   CENTRADA (28/09/2026, lo pidió el cliente): en una rejilla, una casilla que no llena su columna se
   queda pegada a la izquierda. Con `justify-self:center;width:100%` ocupa el ancho de su columna y su
   contenido (la etiqueta o el anuncio de Google) queda en el medio, que es como se espera verlo. */
.card-ad{padding:0;background:#fff;border:1px dashed var(--bord);border-radius:12px;
      display:flex;flex-direction:column;overflow:hidden;height:100%;justify-self:center;width:100%;box-sizing:border-box}
.card-ad .card-media{aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;background:#fff}
.card-ad .ad-slot{width:100%;height:100%;min-height:0;margin:0;border:0;background:transparent;border-radius:0}
.card-ad .card-body{align-items:center;justify-content:center;text-align:center}
.card-ad .card-meta{justify-content:center;color:var(--muted);letter-spacing:1px;text-transform:uppercase;font-size:10px}
/* 6. El pie: cuatro columnas, para que la publicidad de Ivoire Hosting quede en la misma línea
   que Contact, Catégories y Le Griot d'Abidjan. */
@media (min-width:640px) and (max-width:959.98px){ .footer-grid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:960px){ .footer-grid{grid-template-columns:repeat(4,1fr)} }

/* ---- IH-REDES (26/09/2026): el enlace social con su icono ---- */
.red-social{display:flex;align-items:center;gap:8px}
.red-ico{width:15px;height:15px;fill:currentColor;flex:0 0 auto}
/* El botón naranja necesita la clase .btn (la que pone relleno y esquinas); en el bloque
   verde del final se le da algo más de cuerpo para que acompañe al otro botón. */
.cta .btn-orange{padding:12px 20px;border-radius:10px;font-weight:800;font-size:14px}
.cta .btn-orange:hover{background:#D96E00;color:#fff}

/* ---- IH-CATEGORIAS (26/09/2026) ---- */
/* El espacio entre el icono y el nombre de la red: hace falta el mismo prefijo que la regla del
   sitio (`.footer-grid a`), si no la especificidad se la come y el enlace sigue siendo un bloque. */
.footer-grid a.red-social{display:flex;align-items:center;gap:9px}
.red-ico{width:15px;height:15px;fill:currentColor;flex:0 0 auto}

/* Las categorías, en UNA sola línea. En el ordenador, con una flecha a cada lado para ver las
   que no caben; en el móvil, un desplegable. */
.cats{display:block;padding:14px 0 8px;overflow:visible}
.cats-fila{display:flex;align-items:center;gap:8px}
.cats-pista{display:flex;gap:8px;flex:1 1 auto;overflow-x:auto;scroll-behavior:smooth;
      scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:2px 0;margin:0}
.cats-pista::-webkit-scrollbar{display:none}
.cats-flecha{flex:0 0 auto;width:34px;height:34px;border-radius:999px;border:1px solid var(--bord);
      background:#fff;color:var(--texte);font-size:17px;font-weight:800;line-height:1;cursor:pointer;
      display:flex;align-items:center;justify-content:center;padding:0}
.cats-flecha:hover{background:var(--vert);border-color:var(--vert);color:#fff}
.cats-flecha:disabled{opacity:.3;cursor:default}
.cats-flecha:disabled:hover{background:#fff;border-color:var(--bord);color:var(--texte)}
.cats-select{display:none;width:100%;box-sizing:border-box;padding:11px 12px;border:1px solid var(--bord);
      border-radius:10px;background:#fff;font-size:15px;font-weight:700;color:var(--texte);font-family:inherit}
@media (max-width:640px){
  .cats-fila{display:none}
  .cats-select{display:block}
}

/* ---- IH-BANDERA (26/09/2026) ----
   La bandera de Costa de Marfil, dibujada. El emoji 🇨🇮 se ve como «CI» en Windows, porque
   Windows no trae tipografía para banderas: son dos símbolos regionales que el sistema tendría
   que convertir, y no lo hace. Dibujarla evita depender de la fuente del visitante.
   Los tres colores son los de la bandera (y los de la marca). */
.bandera-ci{display:inline-block;width:18px;height:12px;border-radius:2px;
      vertical-align:-1px;margin-right:2px;
      background:linear-gradient(to right,#F77F00 0 33.33%,#fff 33.33% 66.66%,#009A44 66.66% 100%);
      box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}

/* ---- IH-FICHA-NUEVA (26/09/2026): la ficha del anuncio ----
   Dos columnas: el anuncio a la izquierda y un lateral de 300 px a la derecha con el vendedor
   (y sus votos), las acciones, el aviso y la publicidad. En pantalla estrecha el lateral se pone
   debajo solo. */
.ficha-columnas{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;align-items:start}
@media (max-width:860px){ .ficha-columnas{grid-template-columns:1fr} }

.ficha{background:#fff;border:1px solid var(--bord);border-radius:14px;overflow:hidden;box-shadow:var(--ombre)}
.ficha-gal{position:relative;background:var(--fond);aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;overflow:hidden}
/* En la FICHA la foto se ve ENTERA (contain): el recorte es solo para las tarjetas. */
.ficha-gal img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block;cursor:zoom-in;margin:0 auto}
.ficha-gal .contador{position:absolute;bottom:8px;right:8px;background:rgba(0,0,0,.65);color:#fff;font-size:11px;font-weight:700;padding:3px 8px;border-radius:999px}
.ficha-minis{display:flex;gap:6px;padding:8px;overflow-x:auto;scrollbar-width:none}
.ficha-minis::-webkit-scrollbar{display:none}
.ficha-minis img{width:70px;height:53px;object-fit:cover;border-radius:8px;border:2px solid transparent;cursor:pointer;flex:0 0 auto}
.ficha-minis img.activa{border-color:var(--vert)}
.ficha-cuerpo{padding:14px 16px 20px}
.ficha-precio{font-size:21px;font-weight:800;color:var(--vert);line-height:1.15}
.ficha-precio.note{color:var(--muted);font-size:18px}
.ficha-precio .ficha-unidad{font-size:13px;font-weight:700;color:var(--muted)}
.ficha-negociable{font-size:13px;color:var(--muted);margin-top:2px}
.ficha-titulo{font-size:17px;font-weight:800;margin:6px 0 8px;line-height:1.3}
.ficha-meta{font-size:13px;color:var(--muted);display:flex;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.ficha-cat{background:var(--fond);border-radius:999px;padding:2px 10px;font-weight:700;color:var(--vert-fonce)}
.ficha-seccion{font-size:13px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin:16px 0 6px}
.ficha-tabla{width:100%;border-collapse:collapse;font-size:14px;margin:0 0 6px}
.ficha-tabla td{padding:9px 10px;border-bottom:1px solid var(--bord)}
.ficha-tabla td:first-child{color:var(--muted);width:45%}
.ficha-tabla td:last-child{font-weight:700}
.ficha-desc{font-size:15px;line-height:1.65;background:#F9FAF9;border:1px solid var(--bord);border-radius:10px;padding:12px 14px;overflow-wrap:break-word}

/* ---- el lateral ---- */
.lateral{display:flex;flex-direction:column;gap:14px}
.lateral .caja{background:#fff;border:1px solid var(--bord);border-radius:12px;padding:12px 14px}
.lateral .caja h3{font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin:0 0 10px}
.vendedor{display:flex;align-items:center;gap:12px}
.vendedor .avatar{width:44px;height:44px;border-radius:999px;background:var(--vert);color:#fff;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:800;flex:0 0 auto}
.vend-datos{font-size:13px;color:var(--muted);margin-top:2px}
.fiabilidad{border-top:1px solid #F1F3F5;margin-top:12px;padding-top:10px}
.fiabilidad h4{font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin:0 0 8px}
.votos{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0}
.voto{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;padding:7px 11px;border-radius:999px;border:1px solid var(--bord);background:#fff;cursor:pointer;font-family:inherit}
.voto.si{color:#046C2F;border-color:#BBE3C8;background:#F1FAF3}
.voto.no{color:#9A1C1C;border-color:#F3C9C9;background:#FDF3F3}
.voto.elegido{box-shadow:inset 0 0 0 2px currentColor}
.voto:hover{filter:brightness(.97)}
.votos-nota{font-size:12px;color:var(--muted)}
.votos-ayuda{font-size:11.5px;color:#9CA3AF;line-height:1.45;margin:8px 0 0}
.acciones{display:flex;flex-direction:column;gap:8px;margin-top:14px;border-top:1px solid #F1F3F5;padding-top:12px}
.accion{display:flex;align-items:center;justify-content:center;gap:6px;font-size:13.5px;font-weight:700;padding:11px 10px;border-radius:10px;text-decoration:none;background:#F4F5F3;color:var(--texte);border:0;cursor:pointer;font-family:inherit;width:100%;box-sizing:border-box}
.accion.llamar{background:var(--vert);color:#fff}
.accion.llamar:hover{background:var(--vert-fonce)}
.accion.apagada{background:#F9FAF9;color:var(--muted);cursor:default}
.aviso-lateral{font-size:12.5px;line-height:1.5;color:#7C5A00;background:#FFFBEB;border:1px solid #FDE68A;border-radius:10px;padding:10px 12px;margin:14px 0 8px}
/* La lista de consejos contra las estafas (02/10/2026). El cliente pidió los ocho puntos.
   Va en lista y no en un párrafo seguido porque esto se lee en el móvil y de un vistazo: cada
   punto empieza por su emoji y su palabra en negrita, así que se repasa en cinco segundos. */
.aviso-lateral .aviso-titulo{margin:0 0 8px;font-weight:800;font-size:13px;color:#92400E}
.aviso-lista{list-style:none;margin:0;padding:0}
.aviso-lista li{position:relative;padding-left:14px;margin-bottom:6px}
.aviso-lista li:last-child{margin-bottom:0}
.aviso-lista li::before{content:'';position:absolute;left:0;top:6px;width:5px;height:5px;border-radius:50%;background:#F59E0B}
.aviso-lista b{color:#92400E}

/* ============================================================
   EL VÍDEO DEL ANUNCIO (02/10/2026)

   Lo que se guarda es un ENLACE de YouTube o TikTok, no un archivo: el sitio está hecho para
   2G/3G y un vídeo de 10 MB es 200 veces una foto.

   Y nada se carga hasta que se pulsa: la ficha enseña la PORTADA (la sirve YouTube, pesa como
   una foto) con un botón de play. El reproductor —cientos de KB— sólo entra entonces. Así un
   anuncio con vídeo se abre igual de rápido que uno sin él.
   ============================================================ */
.ficha-video{position:relative;margin:0 0 12px;border-radius:12px;overflow:hidden;background:#000}
.ficha-video iframe{display:block;width:100%;aspect-ratio:16/9;height:auto;border:0}
.fv-boton{display:block;position:relative;width:100%;padding:0;border:0;background:#000;cursor:pointer;font-family:inherit}
.fv-boton img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;opacity:.82}
.fv-boton:hover img{opacity:1}
.fv-play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:64px;height:64px;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:25px;padding-left:5px;
  box-shadow:0 2px 10px rgba(0,0,0,.35);pointer-events:none;
}
.fv-txt{
  position:absolute;left:0;right:0;bottom:0;text-align:left;pointer-events:none;
  background:linear-gradient(transparent,rgba(0,0,0,.78));color:#fff;
  font-size:13.5px;font-weight:700;padding:20px 12px 10px;
}
/* TikTok no tiene una forma ligera de incrustarlo: se ofrece el enlace, con su color. */
.fv-enlace{
  display:flex;align-items:center;justify-content:center;gap:11px;
  background:#010101;color:#fff;font-weight:800;font-size:15px;padding:28px 16px;
}
.fv-enlace:hover{background:#1c1c1c;color:#fff;text-decoration:none}
.fv-enlace .fv-play{position:static;transform:none;background:#FE2C55;width:46px;height:46px;font-size:19px}
.fv-enlace .fv-txt{position:static;background:none;padding:0}
/* El sello ▶ de las tarjetas: se ve de un vistazo que el anuncio trae vídeo. */
.card-video{
  position:absolute;left:8px;bottom:8px;z-index:3;background:rgba(0,0,0,.72);color:#fff;
  font-size:12px;line-height:1;padding:5px 8px;border-radius:7px;
}
.btn-suspecto{width:100%;background:#fff;color:#B45309;border:1px solid #F0B27A;font-weight:700;font-size:13px;padding:10px;border-radius:10px;cursor:pointer;font-family:inherit}
.btn-suspecto:hover{background:#FFF7ED}
.aviso-nota{font-size:11.5px;color:#9CA3AF;line-height:1.45;margin:8px 0 0}
.lateral .ad-slot{margin:0;min-height:250px}
.aviso-accion{background:#ECFDF3;border:1px solid #A7F3D0;color:#046C2F;border-radius:10px;padding:10px 14px;font-size:14px;font-weight:700;margin:0 0 14px}

/* ---- IH-FRANJA-UNA (26/09/2026): la franja de los destacados ----
   Los anuncios «à la une» van arriba del todo, con su fondo naranja claro (lo pone .card.una). */
/* OJO (02/10/2026): abajo tenía 2px y la franja quedaba PEGADA a «Dernières annonces».
   El cliente lo pidió: un poco de aire entre los destacados y la lista. */
.franja-una{margin:16px 0 24px}
.franja-una[hidden]{display:none}
.franja-una .section-title{margin-top:0}

/* ---- IH-AVISO-PORTADA (27/09/2026): el aviso de «ya votaste» también en la portada ----
   Reutiliza el verde de .aviso-accion (bloque IH-FICHA-NUEVA), pero FLOTANDO arriba: en la
   portada no hay hueco reservado para él y no debe empujar los anuncios hacia abajo. */
.aviso-flotante{position:fixed;left:50%;top:14px;transform:translateX(-50%);z-index:80;margin:0;max-width:92vw;text-align:center;box-shadow:0 10px 26px rgba(0,0,0,.16)}

/* ---- IH-GALERIA (27/09/2026): pasar de una foto a otra ----
   El visor enseñaba solo la foto que pulsabas y no había forma de pasar a la siguiente. */
.ficha-flecha{position:absolute;top:50%;transform:translateY(-50%);width:34px;height:34px;border:0;border-radius:50%;background:rgba(0,0,0,.45);color:#fff;font-size:20px;line-height:1;cursor:pointer;z-index:2;padding:0}
.ficha-flecha:hover{background:rgba(0,0,0,.7)}
.ficha-flecha.izq{left:8px}
.ficha-flecha.der{right:8px}
.lightbox-flecha{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border:0;border-radius:50%;background:rgba(255,255,255,.15);color:#fff;font-size:28px;line-height:1;cursor:pointer;z-index:2;padding:0}
.lightbox-flecha:hover{background:rgba(255,255,255,.3)}
.lightbox-flecha.izq{left:14px}
.lightbox-flecha.der{right:14px}
.lightbox-contador{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);color:#fff;font-size:13px;font-weight:700;background:rgba(0,0,0,.5);padding:4px 10px;border-radius:999px}
@media (max-width:600px){
  .ficha-flecha{width:30px;height:30px;font-size:17px}
  .lightbox-flecha{width:38px;height:38px;font-size:22px}
}

/* ---- IH-PAGINA-VENDEDOR (27/09/2026): la página del vendedor y el botón de WhatsApp ---- */
.ver-vendedor{display:inline-block;margin-top:6px;font-size:12.5px;font-weight:700;color:var(--vert-fonce);text-decoration:none}
.ver-vendedor:hover{text-decoration:underline}
.accion.llamar-tel{font-size:12.5px;font-weight:400;opacity:.85}
.grid .card{min-width:0}

/* ---- IH-GESTOR-FOTOS (27/09/2026): ver, mover y borrar las fotos de un anuncio ---- */
.gestor-fotos{margin:0}
.gestor-nota{font-size:13px;color:var(--muted);margin:0 0 10px}
.gestor-fila{display:flex;gap:10px;flex-wrap:wrap}
.gestor-foto{position:relative;width:120px;background:#fff;border:1px solid var(--bord);border-radius:10px;overflow:hidden}
.gestor-foto img{width:100%;height:90px;object-fit:cover;display:block}
.gestor-primera{position:absolute;top:4px;left:4px;background:var(--vert);color:#fff;font-size:10px;font-weight:800;padding:1px 6px;border-radius:999px}
.gestor-botones{display:flex;gap:2px;padding:4px;justify-content:center}
.gestor-btn{border:0;background:#F3F4F6;color:#374151;border-radius:6px;font-size:12px;padding:3px 7px;cursor:pointer;font-family:inherit}
.gestor-btn:hover{background:#E5E7EB}
.gestor-btn.borrar{background:#FEE2E2;color:#B91C1C}
.gestor-btn.borrar:hover{background:#FCA5A5}

/* ---- IH-ROTONDA-UNA (27/09/2026): los destacados del lateral se mueven ----
   Se ven dos y van pasando, para que TODOS los que han pagado se vean alguna vez. */
.una-rotonda{position:relative}
.una-item{display:none}
.una-item.visible{display:block}
.una-puntos{display:flex;gap:5px;justify-content:center;margin-top:8px}
/* Sin puntos (uno o dos destacados, o mientras el JavaScript los rehace) no debe dejar hueco */
.una-puntos:empty{display:none}
.una-punto{width:7px;height:7px;border-radius:50%;background:var(--bord)}
.una-punto.activo{background:var(--orange)}

/* ---- IH-BOUTIQUES (27/09/2026): la pagina de una boutique y el indice /boutique/ ----
   La boutique son 15.000 F/mes (decidido por el cliente) y a cambio el vendedor tiene pagina
   propia con su logo, su descripcion y todos sus productos. El indice las lista con un buscador
   que filtra en el navegador, sin pedir nada al servidor. */
.bq-ficha .ficha-cuerpo{padding:18px}
.bq-cabeza{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.bq-logo{width:64px;height:64px;border-radius:14px;object-fit:cover;background:var(--fond);flex:0 0 auto}
.bq-logo-letras{display:flex;align-items:center;justify-content:center;font-weight:800;font-size:20px;color:var(--vert-fonce);background:#E8F5EE}
.bq-nombre{font-size:22px;margin:0 0 4px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.bq-lineas{margin-top:5px}
.bq-descripcion{margin:14px 0 0;font-size:14.5px;line-height:1.6;color:var(--texte)}
.bq-volver{margin:0 0 10px;font-size:13.5px}
.bq-volver a{color:var(--vert-fonce);text-decoration:none;font-weight:600}
.bq-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.bq-card{display:block;background:var(--blanc);border:1px solid var(--bord);border-radius:var(--radius);padding:14px;text-decoration:none;color:inherit}
.bq-card:hover{border-color:var(--vert)}
.bq-card-cabeza{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.bq-card-cabeza strong{font-size:15px;color:var(--vert-fonce)}
.bq-mini{width:38px;height:38px;border-radius:10px;object-fit:cover;flex:0 0 auto;font-size:14px}
.bq-card-desc{margin:0 0 10px;font-size:13px;color:var(--muted);line-height:1.45}
.bq-card-pie{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--muted)}
.bq-buscador{max-width:420px;margin-bottom:16px}
.bq-vacio{background:var(--blanc);border:1px dashed var(--bord);border-radius:var(--radius);padding:16px;font-size:14px;color:var(--muted)}
.bq-vacio a{color:var(--vert-fonce);font-weight:600}
/* ---- IH-PUBLICIDAD (27/09/2026): la pagina para vender publicidad ----
   30.000 F la semana y 80.000 F el mes (decidido por el cliente). El cobro lo hace FOSSBilling:
   los botones llevan a los productos #32 y #33 de la tienda. */
.pub-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin:18px 0 8px}
.pub-card{background:var(--blanc);border:1px solid var(--bord);border-radius:var(--radius);padding:20px;display:flex;flex-direction:column}
.pub-card.destacada{border:2px solid var(--orange)}
.pub-cuando{font-size:13px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);font-weight:700}
.pub-precio{font-size:30px;font-weight:800;color:var(--vert-fonce);margin:6px 0 2px}
.pub-precio small{font-size:13px;font-weight:600;color:var(--muted)}
.pub-lista{margin:10px 0 16px;padding-left:18px;font-size:14px;line-height:1.7}
.pub-card .btn{margin-top:auto;text-align:center}
.pub-lugares{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:12px 0 22px}
.pub-lugar{background:var(--fond);border-radius:var(--radius);padding:14px;font-size:13.5px}
.pub-lugar b{display:block;color:var(--vert-fonce);margin-bottom:4px}
.pub-cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:12px 0 22px}
.pub-cifra{background:var(--blanc);border:1px solid var(--bord);border-radius:var(--radius);padding:14px;text-align:center}
.pub-cifra b{display:block;font-size:24px;color:var(--vert-fonce)}
.pub-cifra span{font-size:12.5px;color:var(--muted)}
.pub-slot{background:repeating-linear-gradient(45deg,#F4F5F3,#F4F5F3 8px,#EDEFEC 8px,#EDEFEC 16px);border:1px dashed var(--bord);border-radius:10px;padding:12px;text-align:center;color:var(--muted);font-size:12.5px;margin:10px 0 18px}

/* ============================================================
   IH-MENUS (02/10/2026) — los menús que se pliegan en el móvil
   y el módulo de «Publier» del pie.

   Lo pidió el cliente: en el teléfono no cabe una fila de botones, así que
   la cabecera se pliega en una hamburguesa y deja fuera SÓLO «Déposer une
   annonce» (que es lo que se quiere a mano). Los menús de sección de los
   paneles usan el mismo mecanismo, con las clases `.subnav`.

   El comportamiento está en `js/menu.js`: aquí sólo está cómo se ve.
   ============================================================ */

/* ---------- 1. La hamburguesa de la cabecera ---------- */
.menu-btn{
  display:none;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  width:42px;height:40px;padding:0;cursor:pointer;flex:0 0 auto;
  background:var(--blanc);border:1px solid var(--bord);border-radius:9px;
}
.menu-btn span{display:block;width:18px;height:2px;background:var(--texte);border-radius:2px;transition:transform .2s,opacity .2s}
/* La hamburguesa se convierte en aspa cuando está abierta: se ve que se puede cerrar. */
.site-header.menu-abierto .menu-btn span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.site-header.menu-abierto .menu-btn span:nth-child(2){opacity:0}
.site-header.menu-abierto .menu-btn span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

@media (max-width:640px){
  .menu-btn{display:flex}
  .header-inner{position:relative;flex-wrap:nowrap}
  /* Lo que se pliega: se despliega debajo de la cabecera, a todo el ancho. */
  .header-actions{
    display:none;position:absolute;top:100%;left:0;right:0;margin:0;
    background:var(--blanc);border-top:1px solid var(--bord);border-bottom:1px solid var(--bord);
    box-shadow:0 10px 22px rgba(0,0,0,.10);
    padding:10px 14px;flex-direction:column;align-items:stretch;gap:8px;z-index:60;
  }
  .site-header.menu-abierto .header-actions{display:flex}
  .header-actions #auth{display:flex;flex-direction:column;gap:8px}
  .header-actions .btn{width:100%;justify-content:center}
  /* «Déposer une annonce» es lo único que se queda fuera: se pega a la derecha,
     con la hamburguesa al lado. */
  .header-inner>.btn-orange{margin-left:auto;padding:9px 12px;font-size:13.5px;white-space:nowrap}
}

/* ---------- 2. Menú secundario de los paneles (admin y «mon espace») ---------- */
.subnav{background:var(--blanc);border:1px solid var(--bord);border-radius:var(--radius);margin:0 0 16px}
.subnav-btn{
  display:none;width:100%;align-items:center;gap:9px;cursor:pointer;font-family:inherit;
  background:transparent;border:0;padding:12px 14px;font-size:14.5px;font-weight:800;color:var(--texte);text-align:left;
}
.subnav-flecha{margin-left:auto;font-size:11px;color:var(--muted);transition:transform .2s}
.subnav.abierto .subnav-flecha{transform:rotate(180deg)}
.subnav-lista{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:8px;margin:0}
.subnav-a{
  display:block;padding:8px 13px;border-radius:9px;border:1px solid transparent;
  font-size:13.5px;font-weight:700;color:var(--texte);white-space:nowrap;
}
.subnav-a:hover{background:var(--fond);color:var(--vert-fonce);border-color:var(--bord)}
.subnav-a .subnav-n{
  display:inline-block;margin-left:6px;background:#FEE2E2;color:#B91C1C;
  font-size:10.5px;font-weight:800;padding:1px 6px;border-radius:20px;vertical-align:1px;
}
/* Las secciones a las que apunta el menú: al saltar, que no queden pegadas a la cabecera. */
.sec-ancla{scroll-margin-top:70px}

@media (max-width:640px){
  .subnav{padding:0;overflow:hidden}
  .subnav-btn{display:flex}
  .subnav-lista{display:none;flex-direction:column;gap:0;padding:0 0 4px}
  .subnav.abierto .subnav-lista{display:flex}
  .subnav-a{border-radius:0;border-bottom:1px solid var(--bord);padding:12px 14px;white-space:normal}
  .subnav-a:last-child{border-bottom:0}
}

/* ---------- 3. El módulo «Publier» del pie ---------- */
/* Dos llamadas a la acción seguidas (formulario y WhatsApp) y, debajo, la frase que
   explica que por WhatsApp no hace falta cuenta. Va el PRIMERO del pie a propósito:
   es lo que interesa que se vea. */
.footer-grid .footer-publier .btn{
  display:flex;width:100%;justify-content:center;text-align:center;
  margin:0 0 8px;padding:11px 10px;font-size:13.5px;line-height:1.25;
}
/* El botón naranja, como el del menú de arriba (lo pidió el cliente el 02/10/2026: antes iba en
   verde y no se asociaba con « publicar »). */
.footer-grid .footer-publier .btn-orange{background:var(--orange);color:#fff}
.footer-grid .footer-publier .btn-orange:hover{background:#D96E00;color:#fff;text-decoration:none}
.footer-grid .footer-publier .footer-wa{background:#25D366;color:#fff}
.footer-grid .footer-publier .footer-wa:hover{background:#1DA851;color:#fff;text-decoration:none}
.footer-grid .footer-publier .footer-nota{
  color:#D7E5DC;font-size:12px;line-height:1.5;margin:8px 0 0;padding:0;
}
/* Cinco módulos: con `auto-fit` caben cinco en pantalla ancha y cuatro o dos
   según se estrecha, sin dejar huecos raros. */
@media (min-width:960px){ .footer-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))} }

/* ---------- 4. Un poco de aire entre secciones ---------- */
/* El cliente lo pidió el 02/10/2026: la franja «À la une» quedaba pegada a «Dernières
   annonces» (tenía 2px) y la lista de boutiques pegada a los anuncios. */
#resultats{margin-bottom:30px}
#boutiques{margin-bottom:26px}
#franja-una + #resultats{margin-top:4px}

/* ---------- 5. La página de contacto ---------- */
.ct-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:16px 0 22px}
.ct-card{background:var(--blanc);border:1px solid var(--bord);border-radius:var(--radius);padding:16px}
.ct-card h3{font-size:15px;margin:0 0 8px;color:var(--vert-fonce)}
.ct-card p{margin:0;font-size:14px;line-height:1.6}
.ct-card a{display:block;padding:3px 0;font-size:14px}
.ct-datos{margin:0;font-size:14px;line-height:1.7}
.ct-datos dt{font-weight:700;color:var(--muted);font-size:12.5px;text-transform:uppercase;letter-spacing:.4px;margin-top:9px}
.ct-datos dd{margin:0}
.ct-wa{
  display:inline-flex;align-items:center;gap:9px;background:#25D366;color:#fff;
  padding:14px 26px;border-radius:11px;font-weight:800;font-size:15.5px;
}
.ct-wa:hover{background:#1DA851;color:#fff;text-decoration:none}

/* ---------- 6. publier.html: elegir cómo mandar el anuncio (02/10/2026) ----------
   Lo pidió el cliente: que se vean las DOS vías —formulario o WhatsApp— y que, según lo que
   elija, salga una cosa u otra. Dentro de la vía de WhatsApp van DOS módulos juntos: el botón
   de siempre (abrir WhatsApp y escribirlo allí) y un formulario corto que arma el mensaje por
   ti. Los dos, uno al lado del otro. */
.via{background:var(--blanc);border:1px solid var(--bord);border-radius:var(--radius);padding:14px;margin:0 0 16px}
.via-pregunta{margin:0 0 10px;font-weight:800;font-size:15.5px}
.via-botones{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
.via-btn{
  display:flex;align-items:center;justify-content:center;gap:9px;cursor:pointer;font-family:inherit;
  background:var(--fond);border:2px solid var(--bord);border-radius:11px;padding:14px 12px;
  font-size:15px;font-weight:800;color:var(--texte);text-align:center;line-height:1.25;
}
.via-btn:hover{border-color:var(--vert);color:var(--vert-fonce)}
.via-btn.activo{background:#E8F5EE;border-color:var(--vert);color:var(--vert-fonce)}
.via-btn[data-via="whatsapp"].activo{background:#E7F9EE;border-color:#25D366;color:#128C4A}
/* Los dos módulos de WhatsApp, uno al lado del otro */
.wa-dos{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:16px;align-items:start}
.wa-dos .form-card{margin:0}
.wa-cta{background:#25D366;color:#fff;padding:15px 30px;border-radius:11px;font-weight:800;font-size:16px;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;box-shadow:0 2px 8px rgba(0,0,0,.12);border:0;cursor:pointer;font-family:inherit}
.wa-cta:hover{background:#1DA851;color:#fff;text-decoration:none}
@media (max-width:640px){ .via-btn{font-size:14px;padding:13px 10px} }
/* Red de seguridad: `hidden` tiene que ganar SIEMPRE. En publier.html los dos paneles se enseñan
   y se esconden con este atributo, y basta con que una regla ponga `display` en el contenedor
   para que el atributo deje de hacer nada y salgan los dos a la vez. */
[hidden]{display:none !important}

/* ============================================================
   IH-PESTANAS (02/10/2026) — el menú secundario ya no baja a la sección,
   la ABRE. Lo pidió el cliente: «los módulos deben aparecer según el menú
   secundario que eliges, que no aparecen todos».

   Los bloques NO llevan `hidden` en el HTML —los esconde `js/menu.js`—, así
   que sin JavaScript la página se ve entera en vez de quedarse en blanco.
   ============================================================ */
/* El enlace de la sección abierta. Ya existía para las anclas; se mantiene. */
.subnav-a.activo{background:var(--vert);color:#fff;border-color:var(--vert)}
.subnav-a.activo:hover{background:var(--vert-fonce);color:#fff}

/* ---------- Las tarjetas de « Notifications » ---------- */
.notif-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin:0 0 20px}
.notif{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;cursor:pointer;
  background:var(--blanc);border:1px solid var(--bord);border-left:4px solid var(--bord);
  border-radius:var(--radius);padding:13px 15px;font-family:inherit;font-size:14px;color:var(--texte);
}
.notif:hover{border-color:var(--vert);background:#F7FBF8}
.notif b{display:block;font-size:24px;line-height:1.1;color:var(--vert-fonce)}
.notif span{display:block;font-size:13px;color:var(--muted);margin-top:2px}
.notif .notif-emoji{font-size:24px;line-height:1;flex:0 0 auto}
/* Con algo pendiente, en rojo: es lo que hay que mirar. */
.notif.pend{border-left-color:#DC2626}
.notif.pend b{color:#B91C1C}
.notif.pend:hover{background:#FFF7F7;border-color:#DC2626}

/* ---------- El buscador + select de la sección de Badges ---------- */
.busca{background:var(--blanc);border:1px solid var(--bord);border-radius:var(--radius);padding:15px 16px;margin:0 0 18px;max-width:760px}
.busca-linea{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.busca-res{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-top:12px;padding-top:12px;border-top:1px solid var(--bord)}
.busca select{min-width:260px;flex:1}
.busca .busca-nota{font-size:12.5px;color:var(--muted);margin:9px 0 0}
.busca-quien{font-size:13.5px;margin:10px 0 0}
.busca-quien strong{color:var(--vert-fonce)}

/* ---------- Las tarjetas de redes sociales (sólo en el panel) ----------
   X e Instagram. Facebook ya tenía su sección con automatismo desde el 28/09/2026; estas dos
   se publican a mano, así que lo que hace el panel es preparar el texto y abrir la red. */
.redes-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;margin:0 0 22px}
.red-card{background:var(--blanc);border:1px solid var(--bord);border-radius:var(--radius);padding:16px}
.red-card h3{font-size:16px;margin:0 0 3px;display:flex;align-items:center;gap:8px}
.red-card .red-cuenta{display:block;font-size:13.5px;color:var(--muted);margin:0 0 12px}
.red-card label{display:block;font-size:12px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin:0 0 5px}
.red-card .inp{width:100%}
.red-card textarea{width:100%;min-height:96px;font-family:inherit;font-size:13.5px;resize:vertical;margin-top:10px}
.red-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;margin-top:10px;
  padding:11px 18px;border:0;border-radius:10px;font-weight:800;font-size:14px;cursor:pointer;
  font-family:inherit;color:#fff;width:100%;
}
.red-btn-x{background:#111}
.red-btn-x:hover{background:#333}
.red-btn-ig{background:linear-gradient(45deg,#F58529,#DD2A7B,#8134AF)}
.red-btn-ig:hover{filter:brightness(1.1)}
.red-aviso{font-size:12.5px;color:var(--muted);margin:10px 0 0;line-height:1.5}