body { font-family: Arial, sans-serif; margin: 20px; }
    .topbar { display:flex; align-items:center; justify-content:space-between; gap: 12px; flex-wrap:wrap; }
    .pill { display:inline-block; padding: 4px 10px; border: 1px solid #ccc; border-radius: 999px; margin: 3px 6px 0 0; background: #fafafa; }
    .grid { display:flex; flex-wrap:wrap; gap: 14px; margin-top: 14px; }
    .card { width: 170px; text-align:center; }
    .label { margin-top: 6px; font-size: 14px; }
    .muted { color: #666; font-size: 13px; }
    .box { border: 1px solid #ddd; border-radius: 12px; padding: 12px; background: #fff; }
    /* a { color: inherit; } */
    .btnlink { text-decoration:none; border:1px solid #ccc; padding:6px 10px; border-radius:10px; background:#fff; }

/* 1) La grille pilote la largeur via --tile-min */
/* #vignettes.image-grid{
  --tile-min: 240px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--tile-min), 1fr));
  gap: 12px;
  align-items: start;
} */

/* mosaïque par défaut : tuiles plus petites */
.image-grid { --tile-max: 140px; }

/* mode liste */
/* .image-grid.is-list{
  grid-template-columns: 1fr;
} */
.image-grid.is-list .canvas-tile{
  display: flex;
  gap: 12px;
  /* align-items: center; */
}
.image-grid.is-list .canvas-tile .thumb img{
  width: 120px;
  height: auto;
  /* object-fit: cover; */
}



/* 2) IMPORTANT : si une règle globale .card { width:170px } existe, on l'écrase */
#vignettes.image-grid .card,
#vignettes.image-grid .canvas-tile{
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;          /* sinon tu ajoutes de l'espace */
}

.canvas-tile{
  border-radius: 10px 10px 0 0;
}

#vignettes.image-grid.is-list .canvas-tile{
  border-radius: 1rem 1rem 1rem 1rem;
}

.canvas-tile{
  border-radius: 1rem 1rem 1rem 1rem;
}
.canvas-link.thumb {
  border-radius: 1rem 1rem 0 0;
}


/* 3) Lien/image occupe toute la largeur de la tuile */
#vignettes.image-grid .canvas-link.thumb{
  display:block !important;
  width:100% !important;
}

/* 4) Image sans étirement : carré en mosaïque */
#vignettes.image-grid .canvas-link.thumb{
  aspect-ratio: 1 / 1;
  overflow:hidden;
  background:#ddd;
}

#vignettes.image-grid img.card-img-top{
  width:100% !important;
  height:100% !important;
  object-fit: cover !important;
  display:block;
}

/* 5) Mode liste */
#vignettes.image-grid.is-list{
  grid-template-columns: 1fr;
}

#vignettes.image-grid.is-list .canvas-tile{
  display:flex;
  gap:14px;
  /* align-items:center; */
}
/* 
#vignettes.image-grid.is-list .canvas-link.thumb{
  flex: 0 0 220px;
  width:220px !important;
  aspect-ratio: 4 / 3;
} */

#vignettes.image-grid.is-list img.card-img-top{
  width:100% !important;
  height:100% !important;
  object-fit: cover !important;
}




/* =========================
   MODE LISTE - type Bootstrap row card
   ========================= */

.image-grid.is-list{
  grid-template-columns: 1fr; /* une seule colonne */
  gap: 16px;
}

/* card horizontale */
.image-grid.is-list .canvas-tile{
  display: flex;
  flex-direction: row;
  align-items: stretch;
  padding: 0;
  overflow: hidden;
}

/* bloc image (équivalent col-md-4) */
.image-grid.is-list .canvas-link.thumb{
  flex: 0 0 220px;        /* largeur image */
  max-width: 220px;
  aspect-ratio: auto;     /* on annule le carré */
  height: auto;
  border-radius: 1rem 1rem 1rem 1rem;
}

/* image */
.image-grid.is-list .canvas-link.thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 1rem 1rem 1rem 1rem;
}

/* texte (équivalent col-md-8) */

.image-grid .card-body {
  flex: 1;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
}

.image-grid.is-list .card-body {
  text-align: left;
  align-items: flex-start;     /* aligne à gauche en flex */
}

/* titre */
.image-grid.is-list .card-title{
  font-size: 1.1rem;
  margin-bottom: 6px;
}